packages/docs/docs/miscellaneous/cross-origin-isolation.mdx
A website can either be cross-origin-isolated or not.
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.
It can also improve performance for packages that can use shared-memory multithreading. For example, @mediabunny/prores uses a faster ProRes decoding path when cross-origin isolation is enabled, and falls back to a slower algorithm otherwise.
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: <Html5Video>, <Html5Audio>, <OffthreadVideo>, ``.
Cross-origin isolation is disabled by default.
To enable cross-origin isolation on your page, the server must send the following HTTP headers:
Cross-Origin-Embedder-Policy: credentialless
Cross-Origin-Opener-Policy: same-origin
credentialless is preferred over require-corp because it still enables SharedArrayBuffer while allowing cross-origin resources (images, videos, audio) to load without requiring them to send Cross-Origin-Resource-Policy headers. The tradeoff is that cross-origin requests are made without credentials (cookies, HTTP authentication). credentialless is not supported in Safari, so use require-corp if you need cross-origin isolation there.
If you need credentials for cross-origin resources, use require-corp instead:
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
See also:
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.
You can check if a page is cross-origin isolated by calling the window.crossOriginIsolated property.
window.crossOriginIsolated; // true