Cross-Origin Isolation
A website can either be cross-origin-isolated or not.
How cross-origin isolation affects pages
Enabling cross-origin isolation is required for some web features. For example, the SharedArrayBuffer API, which is required for the @remotion/whisper-web package to work, is only available in cross-origin isolated pages.
Cross-origin isolation will put some restrictions on the page as well.
For example, HTML5 tags like <video> and <audio> that load media from a different origin will not work unless they have the crossorigin="anonymous" attribute.
If those assets then do not support CORS, they will not load at all.
This also affects the following Remotion tags: <Video>, <Audio>, <OffthreadVideo>, <Img>.
Enabling cross-origin isolation
Cross-origin isolation is disabled by default.
On your server
To enable cross-origin isolation on your page, the server must send the following HTTP headers:
See also:
In the Remotion Studio
In the config file: To enable it, you can use the setEnableCrossSiteIsolation() function in your remotion.config.ts file.
Via CLI flag: You can also enable it by passing the --cross-site-isolation flag to the Remotion CLI.
Checking if a page is cross-origin isolated
You can check if a page is cross-origin isolated by calling the window.crossOriginIsolated property.
ts