From 4f683251392aa65977ed844e26acaf00ef677b1d Mon Sep 17 00:00:00 2001
From: Alec Watts <alec@kino.ai>
Date: Thu, 12 Mar 2026 22:12:54 -0700
Subject: [PATCH 1/6] Add crossOrigin support to @remotion/media <Video> parser
 fetches.

Thread a top-level crossOrigin prop through Video preview playback and map it to UrlSource request credentials so consumers can opt into cookie-backed fetches without forcing credentials for all requests.

Made-with: Cursor
---
 packages/media/src/media-player.ts            | 26 ++++++++++++++++++-
 packages/media/src/video/props.ts             |  1 +
 .../media/src/video/video-for-preview.tsx     |  4 +++
 packages/media/src/video/video.tsx            |  4 +++
 4 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/media/src/media-player.ts b/packages/media/src/media-player.ts
index 0bed0e21137..08e82597aee 100644
--- a/packages/media/src/media-player.ts
+++ b/packages/media/src/media-player.ts
@@ -24,6 +24,20 @@ export type MediaPlayerInitResult =
 	| {type: 'no-tracks'}
 	| {type: 'disposed'};
 
+const crossOriginToRequestCredentials = (
+	crossOrigin: '' | 'anonymous' | 'use-credentials' | undefined,
+): RequestCredentials | undefined => {
+	if (crossOrigin === 'use-credentials') {
+		return 'include';
+	}
+
+	if (crossOrigin === 'anonymous' || crossOrigin === '') {
+		return 'same-origin';
+	}
+
+	return undefined;
+};
+
 export class MediaPlayer {
 	private canvas: HTMLCanvasElement | OffscreenCanvas | null;
 	private context:
@@ -90,6 +104,7 @@ export class MediaPlayer {
 		onVideoFrameCallback,
 		playing,
 		sequenceOffset,
+		crossOrigin,
 	}: {
 		canvas: HTMLCanvasElement | OffscreenCanvas | null;
 		src: string;
@@ -111,6 +126,7 @@ export class MediaPlayer {
 		onVideoFrameCallback: null | ((frame: CanvasImageSource) => void);
 		playing: boolean;
 		sequenceOffset: number;
+		crossOrigin: '' | 'anonymous' | 'use-credentials' | undefined;
 	}) {
 		this.canvas = canvas ?? null;
 		this.src = src;
@@ -133,9 +149,17 @@ export class MediaPlayer {
 		this.onVideoFrameCallback = onVideoFrameCallback;
 		this.playing = playing;
 		this.sequenceOffset = sequenceOffset;
+		const requestCredentials = crossOriginToRequestCredentials(crossOrigin);
 
 		this.input = new Input({
-			source: new UrlSource(this.src),
+			source: new UrlSource(
+				this.src,
+				requestCredentials
+					? {
+							requestInit: {credentials: requestCredentials},
+						}
+					: undefined,
+			),
 			formats: ALL_FORMATS,
 		});
 
diff --git a/packages/media/src/video/props.ts b/packages/media/src/video/props.ts
index fa29c728d59..c26c6f47a14 100644
--- a/packages/media/src/video/props.ts
+++ b/packages/media/src/video/props.ts
@@ -58,6 +58,7 @@ type OptionalVideoProps = {
 	debugAudioScheduling: boolean;
 	headless: boolean;
 	onError: MediaOnError | undefined;
+	crossOrigin: '' | 'anonymous' | 'use-credentials' | undefined;
 };
 
 export type InnerVideoProps = MandatoryVideoProps &
diff --git a/packages/media/src/video/video-for-preview.tsx b/packages/media/src/video/video-for-preview.tsx
index 19c43244aec..3ce96d71aea 100644
--- a/packages/media/src/video/video-for-preview.tsx
+++ b/packages/media/src/video/video-for-preview.tsx
@@ -64,6 +64,7 @@ type VideoForPreviewProps = {
 	readonly debugAudioScheduling: boolean;
 	readonly headless: boolean;
 	readonly onError: MediaOnError | undefined;
+	readonly crossOrigin: '' | 'anonymous' | 'use-credentials' | undefined;
 };
 
 type VideoForPreviewAssertedShowingProps = VideoForPreviewProps & {
@@ -95,6 +96,7 @@ const VideoForPreviewAssertedShowing: React.FC<
 	debugAudioScheduling,
 	headless,
 	onError,
+	crossOrigin,
 	controls,
 }) => {
 	const src = usePreload(unpreloadedSrc);
@@ -229,6 +231,7 @@ const VideoForPreviewAssertedShowing: React.FC<
 				onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
 				playing: initialPlaying.current,
 				sequenceOffset: initialSequenceOffset.current,
+				crossOrigin,
 			});
 
 			mediaPlayerRef.current = player;
@@ -361,6 +364,7 @@ const VideoForPreviewAssertedShowing: React.FC<
 		videoConfig.fps,
 		onError,
 		videoConfig.durationInFrames,
+		crossOrigin,
 	]);
 
 	const classNameValue = useMemo(() => {
diff --git a/packages/media/src/video/video.tsx b/packages/media/src/video/video.tsx
index 1c1f2566fb5..a2ce6345198 100644
--- a/packages/media/src/video/video.tsx
+++ b/packages/media/src/video/video.tsx
@@ -85,6 +85,7 @@ const InnerVideo: React.FC<
 	debugAudioScheduling,
 	headless,
 	onError,
+	crossOrigin,
 	controls,
 }) => {
 	const environment = useRemotionEnvironment();
@@ -170,6 +171,7 @@ const InnerVideo: React.FC<
 			debugAudioScheduling={debugAudioScheduling ?? false}
 			headless={headless ?? false}
 			onError={onError}
+			crossOrigin={crossOrigin}
 			controls={controls}
 		/>
 	);
@@ -205,6 +207,7 @@ const VideoInner: React.FC<
 	debugAudioScheduling,
 	headless,
 	onError,
+	crossOrigin,
 	controls,
 }) => {
 	const fallbackLogLevel = Internals.useLogLevel();
@@ -239,6 +242,7 @@ const VideoInner: React.FC<
 			debugAudioScheduling={debugAudioScheduling ?? false}
 			headless={headless ?? false}
 			onError={onError}
+			crossOrigin={crossOrigin}
 			controls={controls}
 		/>
 	);

From 25a46bb3ee07d2b269ced4c09566b1b44df2b7c0 Mon Sep 17 00:00:00 2001
From: Jonny Burger <jonathanburger11@gmail.com>
Date: Fri, 13 Mar 2026 11:01:03 +0100
Subject: [PATCH 2/6] Rename crossOrigin to credentials and remove mapping

Replace the crossOrigin prop (which mapped HTML video element values to
fetch credentials) with a direct credentials: RequestCredentials prop.
Thread credentials through getSinks/getSink and document the new prop.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/docs/docs/media/video.mdx            | 21 ++++++++++++++++
 .../src/audio-extraction/extract-audio.ts     |  2 +-
 .../media/src/audio/audio-for-preview.tsx     |  1 +
 packages/media/src/get-sink.ts                | 13 ++++++----
 packages/media/src/media-player.ts            | 24 ++++---------------
 packages/media/src/test/media-player.test.ts  |  1 +
 .../media/src/test/trim-change-seek.test.ts   |  1 +
 .../src/video-extraction/extract-frame.ts     |  2 +-
 .../get-frames-since-keyframe.ts              |  6 ++++-
 packages/media/src/video/props.ts             |  2 +-
 .../media/src/video/video-for-preview.tsx     |  8 +++----
 packages/media/src/video/video.tsx            |  8 +++----
 12 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/packages/docs/docs/media/video.mdx b/packages/docs/docs/media/video.mdx
index 3b3dc850a28..bce05619f3a 100644
--- a/packages/docs/docs/media/video.mdx
+++ b/packages/docs/docs/media/video.mdx
@@ -269,6 +269,27 @@ export const MyComposition = () => {
 };
 ```
 
+### `credentials?`
+
+Controls the [`credentials`](https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials) option of the `fetch()` requests made to retrieve the video data.
+
+Accepts `"omit"`, `"same-origin"` (default behavior of `fetch()`) or `"include"`.
+Set to `"include"` if you need to send cookies or authentication headers to a cross-origin video URL.
+
+```tsx twoslash
+import {AbsoluteFill} from 'remotion';
+import {Video} from '@remotion/media';
+
+// ---cut---
+export const MyComposition = () => {
+  return (
+    <AbsoluteFill>
+      <Video credentials="include" src="https://example.com/protected-video.mp4" />
+    </AbsoluteFill>
+  );
+};
+```
+
 ### `toneFrequency?`
 
 Accepts a number between `0.01` and `2`, where `1` represents the original pitch. Values less than `1` will decrease the pitch, while values greater than `1` will increase it.
diff --git a/packages/media/src/audio-extraction/extract-audio.ts b/packages/media/src/audio-extraction/extract-audio.ts
index 52d32cf8492..ef65d4d17de 100644
--- a/packages/media/src/audio-extraction/extract-audio.ts
+++ b/packages/media/src/audio-extraction/extract-audio.ts
@@ -55,7 +55,7 @@ const extractAudioInternal = async ({
 	| 'network-error'
 > => {
 	const {getAudio, actualMatroskaTimestamps, isMatroska, getDuration} =
-		await getSink(src, logLevel);
+		await getSink(src, logLevel, undefined);
 
 	let mediaDurationInSeconds: number | null = null;
 	if (loop) {
diff --git a/packages/media/src/audio/audio-for-preview.tsx b/packages/media/src/audio/audio-for-preview.tsx
index bb9ccc64163..88256c38f1f 100644
--- a/packages/media/src/audio/audio-for-preview.tsx
+++ b/packages/media/src/audio/audio-for-preview.tsx
@@ -237,6 +237,7 @@ const AudioForPreviewAssertedShowing: React.FC<
 				onVideoFrameCallback: null,
 				playing: initialPlaying.current,
 				sequenceOffset: initialSequenceOffset.current,
+				credentials: undefined,
 			});
 
 			mediaPlayerRef.current = player;
diff --git a/packages/media/src/get-sink.ts b/packages/media/src/get-sink.ts
index f6a0d6e6578..4ebb40f1ccc 100644
--- a/packages/media/src/get-sink.ts
+++ b/packages/media/src/get-sink.ts
@@ -5,8 +5,13 @@ import {getSinks} from './video-extraction/get-frames-since-keyframe';
 
 export const sinkPromises: Record<string, Promise<GetSink>> = {};
 
-export const getSink = (src: string, logLevel: LogLevel) => {
-	let promise = sinkPromises[src];
+export const getSink = (
+	src: string,
+	logLevel: LogLevel,
+	credentials: RequestCredentials | undefined,
+) => {
+	const cacheKey = credentials ? `${src}::${credentials}` : src;
+	let promise = sinkPromises[cacheKey];
 	if (!promise) {
 		Internals.Log.verbose(
 			{
@@ -15,8 +20,8 @@ export const getSink = (src: string, logLevel: LogLevel) => {
 			},
 			`Sink for ${src} was not found, creating new sink`,
 		);
-		promise = getSinks(src);
-		sinkPromises[src] = promise;
+		promise = getSinks(src, credentials);
+		sinkPromises[cacheKey] = promise;
 	}
 
 	return promise;
diff --git a/packages/media/src/media-player.ts b/packages/media/src/media-player.ts
index 08e82597aee..8888ba56113 100644
--- a/packages/media/src/media-player.ts
+++ b/packages/media/src/media-player.ts
@@ -24,20 +24,6 @@ export type MediaPlayerInitResult =
 	| {type: 'no-tracks'}
 	| {type: 'disposed'};
 
-const crossOriginToRequestCredentials = (
-	crossOrigin: '' | 'anonymous' | 'use-credentials' | undefined,
-): RequestCredentials | undefined => {
-	if (crossOrigin === 'use-credentials') {
-		return 'include';
-	}
-
-	if (crossOrigin === 'anonymous' || crossOrigin === '') {
-		return 'same-origin';
-	}
-
-	return undefined;
-};
-
 export class MediaPlayer {
 	private canvas: HTMLCanvasElement | OffscreenCanvas | null;
 	private context:
@@ -104,7 +90,7 @@ export class MediaPlayer {
 		onVideoFrameCallback,
 		playing,
 		sequenceOffset,
-		crossOrigin,
+		credentials,
 	}: {
 		canvas: HTMLCanvasElement | OffscreenCanvas | null;
 		src: string;
@@ -126,7 +112,7 @@ export class MediaPlayer {
 		onVideoFrameCallback: null | ((frame: CanvasImageSource) => void);
 		playing: boolean;
 		sequenceOffset: number;
-		crossOrigin: '' | 'anonymous' | 'use-credentials' | undefined;
+		credentials: RequestCredentials | undefined;
 	}) {
 		this.canvas = canvas ?? null;
 		this.src = src;
@@ -149,14 +135,12 @@ export class MediaPlayer {
 		this.onVideoFrameCallback = onVideoFrameCallback;
 		this.playing = playing;
 		this.sequenceOffset = sequenceOffset;
-		const requestCredentials = crossOriginToRequestCredentials(crossOrigin);
-
 		this.input = new Input({
 			source: new UrlSource(
 				this.src,
-				requestCredentials
+				credentials
 					? {
-							requestInit: {credentials: requestCredentials},
+							requestInit: {credentials},
 						}
 					: undefined,
 			),
diff --git a/packages/media/src/test/media-player.test.ts b/packages/media/src/test/media-player.test.ts
index b5907f4be6c..d7f66b9880e 100644
--- a/packages/media/src/test/media-player.test.ts
+++ b/packages/media/src/test/media-player.test.ts
@@ -53,6 +53,7 @@ test('dispose should immediately unblock playback delays', async () => {
 		onVideoFrameCallback: null,
 		playing: false,
 		sequenceOffset: 0,
+		credentials: undefined,
 	});
 
 	await player.initialize(0, false);
diff --git a/packages/media/src/test/trim-change-seek.test.ts b/packages/media/src/test/trim-change-seek.test.ts
index dfa217c58e0..224bb59c86d 100644
--- a/packages/media/src/test/trim-change-seek.test.ts
+++ b/packages/media/src/test/trim-change-seek.test.ts
@@ -23,6 +23,7 @@ test('setTrimBefore and setTrimAfter should update frame when paused', async ()
 		onVideoFrameCallback: null,
 		playing: false,
 		sequenceOffset: 0,
+		credentials: undefined,
 	});
 
 	await player.initialize(0, false);
diff --git a/packages/media/src/video-extraction/extract-frame.ts b/packages/media/src/video-extraction/extract-frame.ts
index 54ad734a4ec..fa9e0d14f20 100644
--- a/packages/media/src/video-extraction/extract-frame.ts
+++ b/packages/media/src/video-extraction/extract-frame.ts
@@ -38,7 +38,7 @@ const extractFrameInternal = async ({
 	fps,
 	maxCacheSize,
 }: ExtractFrameParams): Promise<ExtractFrameResult> => {
-	const sink = await getSink(src, logLevel);
+	const sink = await getSink(src, logLevel, undefined);
 
 	const [video, mediaDurationInSecondsRaw] = await Promise.all([
 		sink.getVideo(),
diff --git a/packages/media/src/video-extraction/get-frames-since-keyframe.ts b/packages/media/src/video-extraction/get-frames-since-keyframe.ts
index a7939ec1e26..3141ff9a753 100644
--- a/packages/media/src/video-extraction/get-frames-since-keyframe.ts
+++ b/packages/media/src/video-extraction/get-frames-since-keyframe.ts
@@ -53,11 +53,15 @@ const getFormatOrNullOrNetworkError = async (
 	}
 };
 
-export const getSinks = async (src: string) => {
+export const getSinks = async (
+	src: string,
+	credentials: RequestCredentials | undefined,
+) => {
 	const input = new Input({
 		formats: ALL_FORMATS,
 		source: new UrlSource(src, {
 			getRetryDelay,
+			...(credentials ? {requestInit: {credentials}} : undefined),
 		}),
 	});
 
diff --git a/packages/media/src/video/props.ts b/packages/media/src/video/props.ts
index c26c6f47a14..6956f8ada37 100644
--- a/packages/media/src/video/props.ts
+++ b/packages/media/src/video/props.ts
@@ -58,7 +58,7 @@ type OptionalVideoProps = {
 	debugAudioScheduling: boolean;
 	headless: boolean;
 	onError: MediaOnError | undefined;
-	crossOrigin: '' | 'anonymous' | 'use-credentials' | undefined;
+	credentials: RequestCredentials | undefined;
 };
 
 export type InnerVideoProps = MandatoryVideoProps &
diff --git a/packages/media/src/video/video-for-preview.tsx b/packages/media/src/video/video-for-preview.tsx
index 3ce96d71aea..38babbe7d52 100644
--- a/packages/media/src/video/video-for-preview.tsx
+++ b/packages/media/src/video/video-for-preview.tsx
@@ -64,7 +64,7 @@ type VideoForPreviewProps = {
 	readonly debugAudioScheduling: boolean;
 	readonly headless: boolean;
 	readonly onError: MediaOnError | undefined;
-	readonly crossOrigin: '' | 'anonymous' | 'use-credentials' | undefined;
+	readonly credentials: RequestCredentials | undefined;
 };
 
 type VideoForPreviewAssertedShowingProps = VideoForPreviewProps & {
@@ -96,7 +96,7 @@ const VideoForPreviewAssertedShowing: React.FC<
 	debugAudioScheduling,
 	headless,
 	onError,
-	crossOrigin,
+	credentials,
 	controls,
 }) => {
 	const src = usePreload(unpreloadedSrc);
@@ -231,7 +231,7 @@ const VideoForPreviewAssertedShowing: React.FC<
 				onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
 				playing: initialPlaying.current,
 				sequenceOffset: initialSequenceOffset.current,
-				crossOrigin,
+				credentials,
 			});
 
 			mediaPlayerRef.current = player;
@@ -364,7 +364,7 @@ const VideoForPreviewAssertedShowing: React.FC<
 		videoConfig.fps,
 		onError,
 		videoConfig.durationInFrames,
-		crossOrigin,
+		credentials,
 	]);
 
 	const classNameValue = useMemo(() => {
diff --git a/packages/media/src/video/video.tsx b/packages/media/src/video/video.tsx
index a2ce6345198..77741e14d89 100644
--- a/packages/media/src/video/video.tsx
+++ b/packages/media/src/video/video.tsx
@@ -85,7 +85,7 @@ const InnerVideo: React.FC<
 	debugAudioScheduling,
 	headless,
 	onError,
-	crossOrigin,
+	credentials,
 	controls,
 }) => {
 	const environment = useRemotionEnvironment();
@@ -171,7 +171,7 @@ const InnerVideo: React.FC<
 			debugAudioScheduling={debugAudioScheduling ?? false}
 			headless={headless ?? false}
 			onError={onError}
-			crossOrigin={crossOrigin}
+			credentials={credentials}
 			controls={controls}
 		/>
 	);
@@ -207,7 +207,7 @@ const VideoInner: React.FC<
 	debugAudioScheduling,
 	headless,
 	onError,
-	crossOrigin,
+	credentials,
 	controls,
 }) => {
 	const fallbackLogLevel = Internals.useLogLevel();
@@ -242,7 +242,7 @@ const VideoInner: React.FC<
 			debugAudioScheduling={debugAudioScheduling ?? false}
 			headless={headless ?? false}
 			onError={onError}
-			crossOrigin={crossOrigin}
+			credentials={credentials}
 			controls={controls}
 		/>
 	);

From 5b160e10c21fa986ace8e1619e45d82ebf370ab2 Mon Sep 17 00:00:00 2001
From: Jonny Burger <jonathanburger11@gmail.com>
Date: Fri, 13 Mar 2026 12:50:58 +0100
Subject: [PATCH 3/6] Thread credentials through entire rendering pipeline and
 document for Audio

Pass credentials prop through extractFrame, extractAudio,
extractFrameAndAudio, extractFrameViaBroadcastChannel, and the
broadcast channel request type. Add credentials to AudioProps and
audio-for-preview. Add AvailableFrom tag to Video docs and add
credentials documentation for Audio.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/docs/docs/media/audio.mdx            | 21 +++++++++++++++++++
 packages/docs/docs/media/video.mdx            |  2 +-
 .../src/audio-extraction/extract-audio.ts     |  4 +++-
 .../media/src/audio/audio-for-preview.tsx     |  8 ++++++-
 .../media/src/audio/audio-for-rendering.tsx   |  3 +++
 packages/media/src/audio/props.ts             |  1 +
 packages/media/src/extract-frame-and-audio.ts |  4 ++++
 .../media/src/test/audio-encoding.test.ts     |  1 +
 packages/media/src/test/browser.test.ts       |  5 +++++
 .../media/src/test/editlist-offset.test.ts    |  3 +++
 .../src/test/extract-accuracy-uneven.test.ts  |  1 +
 .../media/src/test/extract-accuracy.test.ts   |  1 +
 packages/media/src/test/looping.test.ts       |  1 +
 .../media/src/test/video-after-end.test.ts    |  1 +
 .../src/test/video-non-zero-start.test.ts     |  1 +
 .../video-with-no-frames-in-beginning.test.ts |  2 ++
 .../add-broadcast-channel-listener.ts         |  2 ++
 .../extract-frame-via-broadcast-channel.ts    |  4 ++++
 .../src/video-extraction/extract-frame.ts     |  4 +++-
 .../media/src/video/video-for-rendering.tsx   |  4 ++++
 packages/media/src/video/video.tsx            |  1 +
 21 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/packages/docs/docs/media/audio.mdx b/packages/docs/docs/media/audio.mdx
index bf8aa3c0c6a..edef83f6ca4 100644
--- a/packages/docs/docs/media/audio.mdx
+++ b/packages/docs/docs/media/audio.mdx
@@ -227,6 +227,27 @@ export const MyComposition = () => {
 };
 ```
 
+### `credentials?`<AvailableFrom v="4.0.436" />
+
+Controls the [`credentials`](https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials) option of the `fetch()` requests made to retrieve the audio data.
+
+Accepts `"omit"`, `"same-origin"` (default behavior of `fetch()`) or `"include"`.
+Set to `"include"` if you need to send cookies or authentication headers to a cross-origin audio URL.
+
+```tsx twoslash
+import {AbsoluteFill} from 'remotion';
+import {Audio} from '@remotion/media';
+
+// ---cut---
+export const MyComposition = () => {
+  return (
+    <AbsoluteFill>
+      <Audio credentials="include" src="https://example.com/protected-audio.mp3" />
+    </AbsoluteFill>
+  );
+};
+```
+
 ### `toneFrequency?`
 
 Accepts a number between `0.01` and `2`, where `1` represents the original pitch. Values less than `1` will decrease the pitch, while values greater than `1` will increase it.
diff --git a/packages/docs/docs/media/video.mdx b/packages/docs/docs/media/video.mdx
index bce05619f3a..98e70d89de5 100644
--- a/packages/docs/docs/media/video.mdx
+++ b/packages/docs/docs/media/video.mdx
@@ -269,7 +269,7 @@ export const MyComposition = () => {
 };
 ```
 
-### `credentials?`
+### `credentials?`<AvailableFrom v="4.0.436" />
 
 Controls the [`credentials`](https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials) option of the `fetch()` requests made to retrieve the video data.
 
diff --git a/packages/media/src/audio-extraction/extract-audio.ts b/packages/media/src/audio-extraction/extract-audio.ts
index ef65d4d17de..e4a5b0cb852 100644
--- a/packages/media/src/audio-extraction/extract-audio.ts
+++ b/packages/media/src/audio-extraction/extract-audio.ts
@@ -31,6 +31,7 @@ type ExtractAudioParams = {
 	trimAfter: number | undefined;
 	fps: number;
 	maxCacheSize: number;
+	credentials: RequestCredentials | undefined;
 };
 
 const extractAudioInternal = async ({
@@ -45,6 +46,7 @@ const extractAudioInternal = async ({
 	trimAfter,
 	fps,
 	maxCacheSize,
+	credentials,
 }: ExtractAudioParams): Promise<
 	| {
 			data: PcmS16AudioData | null;
@@ -55,7 +57,7 @@ const extractAudioInternal = async ({
 	| 'network-error'
 > => {
 	const {getAudio, actualMatroskaTimestamps, isMatroska, getDuration} =
-		await getSink(src, logLevel, undefined);
+		await getSink(src, logLevel, credentials);
 
 	let mediaDurationInSeconds: number | null = null;
 	if (loop) {
diff --git a/packages/media/src/audio/audio-for-preview.tsx b/packages/media/src/audio/audio-for-preview.tsx
index 88256c38f1f..50a15c51fec 100644
--- a/packages/media/src/audio/audio-for-preview.tsx
+++ b/packages/media/src/audio/audio-for-preview.tsx
@@ -52,6 +52,7 @@ type NewAudioForPreviewProps = {
 	readonly fallbackHtml5AudioProps: FallbackHtml5AudioProps | undefined;
 	readonly debugAudioScheduling: boolean;
 	readonly onError: MediaOnError | undefined;
+	readonly credentials: RequestCredentials | undefined;
 };
 
 type AudioForPreviewAssertedShowingProps = NewAudioForPreviewProps & {
@@ -79,6 +80,7 @@ const AudioForPreviewAssertedShowing: React.FC<
 	fallbackHtml5AudioProps,
 	debugAudioScheduling,
 	onError,
+	credentials,
 	controls,
 }) => {
 	const videoConfig = useUnsafeVideoConfig();
@@ -237,7 +239,7 @@ const AudioForPreviewAssertedShowing: React.FC<
 				onVideoFrameCallback: null,
 				playing: initialPlaying.current,
 				sequenceOffset: initialSequenceOffset.current,
-				credentials: undefined,
+				credentials,
 			});
 
 			mediaPlayerRef.current = player;
@@ -374,6 +376,7 @@ const AudioForPreviewAssertedShowing: React.FC<
 		buffer,
 		onError,
 		videoConfig.durationInFrames,
+		credentials,
 	]);
 
 	if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
@@ -428,6 +431,7 @@ type InnerAudioProps = {
 	readonly fallbackHtml5AudioProps?: FallbackHtml5AudioProps;
 	readonly debugAudioScheduling?: boolean;
 	readonly onError?: MediaOnError;
+	readonly credentials?: RequestCredentials;
 };
 
 export const AudioForPreview: React.FC<
@@ -453,6 +457,7 @@ export const AudioForPreview: React.FC<
 	fallbackHtml5AudioProps,
 	debugAudioScheduling,
 	onError,
+	credentials,
 	controls,
 }) => {
 	const preloadedSrc = usePreload(src);
@@ -509,6 +514,7 @@ export const AudioForPreview: React.FC<
 			toneFrequency={toneFrequency}
 			debugAudioScheduling={debugAudioScheduling ?? false}
 			onError={onError}
+			credentials={credentials}
 			fallbackHtml5AudioProps={fallbackHtml5AudioProps}
 			controls={controls}
 		/>
diff --git a/packages/media/src/audio/audio-for-rendering.tsx b/packages/media/src/audio/audio-for-rendering.tsx
index 41119b03ff6..f4b6559af13 100644
--- a/packages/media/src/audio/audio-for-rendering.tsx
+++ b/packages/media/src/audio/audio-for-rendering.tsx
@@ -37,6 +37,7 @@ export const AudioForRendering: React.FC<AudioProps> = ({
 	trimAfter,
 	trimBefore,
 	onError,
+	credentials,
 }) => {
 	const defaultLogLevel = Internals.useLogLevel();
 	const logLevel = overriddenLogLevel ?? defaultLogLevel;
@@ -129,6 +130,7 @@ export const AudioForRendering: React.FC<AudioProps> = ({
 			trimBefore,
 			fps,
 			maxCacheSize,
+			credentials,
 		})
 			.then((result) => {
 				const handleError = (
@@ -266,6 +268,7 @@ export const AudioForRendering: React.FC<AudioProps> = ({
 		maxCacheSize,
 		audioEnabled,
 		onError,
+		credentials,
 	]);
 
 	if (replaceWithHtml5Audio) {
diff --git a/packages/media/src/audio/props.ts b/packages/media/src/audio/props.ts
index 668f522ec67..ea3f3981a0d 100644
--- a/packages/media/src/audio/props.ts
+++ b/packages/media/src/audio/props.ts
@@ -35,4 +35,5 @@ export type AudioProps = {
 	delayRenderTimeoutInMilliseconds?: number;
 	debugAudioScheduling?: boolean;
 	onError?: MediaOnError;
+	credentials?: RequestCredentials;
 };
diff --git a/packages/media/src/extract-frame-and-audio.ts b/packages/media/src/extract-frame-and-audio.ts
index 0584a79ffda..68ccb404530 100644
--- a/packages/media/src/extract-frame-and-audio.ts
+++ b/packages/media/src/extract-frame-and-audio.ts
@@ -19,6 +19,7 @@ export const extractFrameAndAudio = async ({
 	trimBefore,
 	fps,
 	maxCacheSize,
+	credentials,
 }: {
 	src: string;
 	timeInSeconds: number;
@@ -33,6 +34,7 @@ export const extractFrameAndAudio = async ({
 	trimBefore: number | undefined;
 	fps: number;
 	maxCacheSize: number;
+	credentials: RequestCredentials | undefined;
 }): Promise<ExtractFrameViaBroadcastChannelResult> => {
 	try {
 		const [video, audio] = await Promise.all([
@@ -47,6 +49,7 @@ export const extractFrameAndAudio = async ({
 						trimBefore,
 						fps,
 						maxCacheSize,
+						credentials,
 					})
 				: null,
 			includeAudio
@@ -62,6 +65,7 @@ export const extractFrameAndAudio = async ({
 						fps,
 						trimBefore,
 						maxCacheSize,
+						credentials,
 					})
 				: null,
 		]);
diff --git a/packages/media/src/test/audio-encoding.test.ts b/packages/media/src/test/audio-encoding.test.ts
index df59619e983..7bec8e1293a 100644
--- a/packages/media/src/test/audio-encoding.test.ts
+++ b/packages/media/src/test/audio-encoding.test.ts
@@ -35,6 +35,7 @@ test('Audio samples from MP3 should produce identical s16 output on Chrome and F
 		maxCacheSize: getMaxVideoCacheSize('info'),
 		durationInSeconds: 1 / 30,
 		audioStreamIndex: 0,
+		credentials: undefined,
 	});
 
 	if (a === 'cannot-decode') {
diff --git a/packages/media/src/test/browser.test.ts b/packages/media/src/test/browser.test.ts
index 678af15e017..476def6101e 100644
--- a/packages/media/src/test/browser.test.ts
+++ b/packages/media/src/test/browser.test.ts
@@ -20,6 +20,7 @@ test('Should be able to extract a frame', async () => {
 		trimBefore: undefined,
 		fps: 30,
 		maxCacheSize: getMaxVideoCacheSize('info'),
+		credentials: undefined,
 	});
 
 	if (result.type === 'cannot-decode') {
@@ -71,6 +72,7 @@ test('Should be able to extract the last frame', async () => {
 		trimBefore: undefined,
 		fps: 30,
 		maxCacheSize: getMaxVideoCacheSize('info'),
+		credentials: undefined,
 	});
 
 	if (result.type === 'cannot-decode') {
@@ -121,6 +123,7 @@ test('Should manage the cache', async (t) => {
 			trimBefore: undefined,
 			fps: 30,
 			maxCacheSize: getMaxVideoCacheSize('info'),
+			credentials: undefined,
 		});
 	}
 
@@ -150,6 +153,7 @@ test('Should be apply volume correctly', async () => {
 		trimBefore: undefined,
 		fps: 30,
 		maxCacheSize: getMaxVideoCacheSize('info'),
+		credentials: undefined,
 	});
 
 	if (result.type === 'cannot-decode') {
@@ -204,6 +208,7 @@ test('Should be able to loop', async () => {
 		trimBefore: undefined,
 		fps: 30,
 		maxCacheSize: getMaxVideoCacheSize('info'),
+		credentials: undefined,
 	});
 
 	if (result.type === 'cannot-decode') {
diff --git a/packages/media/src/test/editlist-offset.test.ts b/packages/media/src/test/editlist-offset.test.ts
index 14b8516c64d..70b3f5c3062 100644
--- a/packages/media/src/test/editlist-offset.test.ts
+++ b/packages/media/src/test/editlist-offset.test.ts
@@ -16,6 +16,7 @@ test('Audio extraction should be correct if there is edit list offset', async ()
 		trimBefore: undefined,
 		trimAfter: undefined,
 		maxCacheSize: getMaxVideoCacheSize('info'),
+		credentials: undefined,
 	});
 	assert(audio1 !== 'cannot-decode');
 	assert(audio1 !== 'unknown-container-format');
@@ -36,6 +37,7 @@ test('Audio extraction should be correct if there is edit list offset', async ()
 		trimBefore: undefined,
 		trimAfter: undefined,
 		maxCacheSize: getMaxVideoCacheSize('info'),
+		credentials: undefined,
 	});
 	assert(audio2 !== 'cannot-decode');
 	assert(audio2 !== 'unknown-container-format');
@@ -59,6 +61,7 @@ test('Audio extraction should be correct if there is edit list offset', async ()
 		trimBefore: undefined,
 		trimAfter: undefined,
 		maxCacheSize: getMaxVideoCacheSize('info'),
+		credentials: undefined,
 	});
 	assert(audio3 !== 'cannot-decode');
 	assert(audio3 !== 'unknown-container-format');
diff --git a/packages/media/src/test/extract-accuracy-uneven.test.ts b/packages/media/src/test/extract-accuracy-uneven.test.ts
index 66cc23e252f..756aed1da5c 100644
--- a/packages/media/src/test/extract-accuracy-uneven.test.ts
+++ b/packages/media/src/test/extract-accuracy-uneven.test.ts
@@ -21,6 +21,7 @@ test('Extract accuracy over 100 frames with playback rate 1.75', async () => {
 			trimBefore: undefined,
 			trimAfter: undefined,
 			maxCacheSize: getMaxVideoCacheSize('info'),
+			credentials: undefined,
 		});
 		if (audio === 'cannot-decode') {
 			throw new Error(`Cannot decode at frame ${i}`);
diff --git a/packages/media/src/test/extract-accuracy.test.ts b/packages/media/src/test/extract-accuracy.test.ts
index eabc06b37f6..5babcb6a177 100644
--- a/packages/media/src/test/extract-accuracy.test.ts
+++ b/packages/media/src/test/extract-accuracy.test.ts
@@ -21,6 +21,7 @@ test('Extract accuracy over 100 frames with playback rate 2', async () => {
 			trimBefore: undefined,
 			trimAfter: undefined,
 			maxCacheSize: getMaxVideoCacheSize('info'),
+			credentials: undefined,
 		});
 		if (audio === 'cannot-decode') {
 			throw new Error(`Cannot decode at frame ${i}`);
diff --git a/packages/media/src/test/looping.test.ts b/packages/media/src/test/looping.test.ts
index 858c3b8d9c9..08d93cc1af0 100644
--- a/packages/media/src/test/looping.test.ts
+++ b/packages/media/src/test/looping.test.ts
@@ -41,6 +41,7 @@ test(
 				playbackRate,
 				fps,
 				maxCacheSize: getMaxVideoCacheSize('info'),
+				credentials: undefined,
 			});
 			expect(result.type).toBe('success');
 			assert(result.type === 'success');
diff --git a/packages/media/src/test/video-after-end.test.ts b/packages/media/src/test/video-after-end.test.ts
index 2d603e0c5c4..e1bae94d699 100644
--- a/packages/media/src/test/video-after-end.test.ts
+++ b/packages/media/src/test/video-after-end.test.ts
@@ -15,6 +15,7 @@ test('Should render last frame for timestamps after video end', async () => {
 		playbackRate: 1,
 		fps: 24,
 		maxCacheSize: getMaxVideoCacheSize('info'),
+		credentials: undefined,
 	});
 
 	assert(result.type === 'success');
diff --git a/packages/media/src/test/video-non-zero-start.test.ts b/packages/media/src/test/video-non-zero-start.test.ts
index 4e0fb29536f..c557c0a9a61 100644
--- a/packages/media/src/test/video-non-zero-start.test.ts
+++ b/packages/media/src/test/video-non-zero-start.test.ts
@@ -19,6 +19,7 @@ test('Should render first frame for videos starting after timestamp 0', async ()
 		playbackRate: 1,
 		fps: 30,
 		maxCacheSize: getMaxVideoCacheSize('info'),
+		credentials: undefined,
 	});
 
 	// Should successfully extract (no error thrown)
diff --git a/packages/media/src/test/video-with-no-frames-in-beginning.test.ts b/packages/media/src/test/video-with-no-frames-in-beginning.test.ts
index b9205f7707b..06f0808782a 100644
--- a/packages/media/src/test/video-with-no-frames-in-beginning.test.ts
+++ b/packages/media/src/test/video-with-no-frames-in-beginning.test.ts
@@ -145,6 +145,7 @@ test('in rendering, should also be smart', async (t) => {
 			playbackRate: 1,
 			fps: 30,
 			maxCacheSize: getMaxVideoCacheSize('info'),
+			credentials: undefined,
 		});
 		assert(frame.type === 'success');
 		if (lastFrame) {
@@ -167,6 +168,7 @@ test('in rendering, should also be smart', async (t) => {
 		playbackRate: 1,
 		fps: 30,
 		maxCacheSize: getMaxVideoCacheSize('info'),
+		credentials: undefined,
 	});
 
 	assert(firstRealFrame.type === 'success');
diff --git a/packages/media/src/video-extraction/add-broadcast-channel-listener.ts b/packages/media/src/video-extraction/add-broadcast-channel-listener.ts
index 99dad4b3ca5..d8a6beb3a4b 100644
--- a/packages/media/src/video-extraction/add-broadcast-channel-listener.ts
+++ b/packages/media/src/video-extraction/add-broadcast-channel-listener.ts
@@ -53,6 +53,7 @@ export type ExtractFrameRequest = {
 	trimBefore: number | undefined;
 	fps: number;
 	maxCacheSize: number;
+	credentials: RequestCredentials | undefined;
 };
 
 // Send to other channels a message to let them know that the
@@ -102,6 +103,7 @@ export const addBroadcastChannelListener = () => {
 						trimBefore: data.trimBefore,
 						fps: data.fps,
 						maxCacheSize: data.maxCacheSize,
+						credentials: data.credentials,
 					});
 
 					if (result.type === 'cannot-decode') {
diff --git a/packages/media/src/video-extraction/extract-frame-via-broadcast-channel.ts b/packages/media/src/video-extraction/extract-frame-via-broadcast-channel.ts
index f936d6d858b..a6285cfef25 100644
--- a/packages/media/src/video-extraction/extract-frame-via-broadcast-channel.ts
+++ b/packages/media/src/video-extraction/extract-frame-via-broadcast-channel.ts
@@ -39,6 +39,7 @@ export const extractFrameViaBroadcastChannel = async ({
 	trimBefore,
 	fps,
 	maxCacheSize,
+	credentials,
 }: {
 	src: string;
 	timeInSeconds: number;
@@ -54,6 +55,7 @@ export const extractFrameViaBroadcastChannel = async ({
 	trimBefore: number | undefined;
 	fps: number;
 	maxCacheSize: number;
+	credentials: RequestCredentials | undefined;
 }): Promise<ExtractFrameViaBroadcastChannelResult> => {
 	if (isClientSideRendering || window.remotion_isMainTab) {
 		return extractFrameAndAudio({
@@ -70,6 +72,7 @@ export const extractFrameViaBroadcastChannel = async ({
 			trimBefore,
 			fps,
 			maxCacheSize,
+			credentials,
 		});
 	}
 
@@ -195,6 +198,7 @@ export const extractFrameViaBroadcastChannel = async ({
 		trimBefore,
 		fps,
 		maxCacheSize,
+		credentials,
 	};
 
 	window.remotion_broadcastChannel!.postMessage(request);
diff --git a/packages/media/src/video-extraction/extract-frame.ts b/packages/media/src/video-extraction/extract-frame.ts
index fa9e0d14f20..ce47e042c6c 100644
--- a/packages/media/src/video-extraction/extract-frame.ts
+++ b/packages/media/src/video-extraction/extract-frame.ts
@@ -25,6 +25,7 @@ type ExtractFrameParams = {
 	playbackRate: number;
 	fps: number;
 	maxCacheSize: number;
+	credentials: RequestCredentials | undefined;
 };
 
 const extractFrameInternal = async ({
@@ -37,8 +38,9 @@ const extractFrameInternal = async ({
 	playbackRate,
 	fps,
 	maxCacheSize,
+	credentials,
 }: ExtractFrameParams): Promise<ExtractFrameResult> => {
-	const sink = await getSink(src, logLevel, undefined);
+	const sink = await getSink(src, logLevel, credentials);
 
 	const [video, mediaDurationInSecondsRaw] = await Promise.all([
 		sink.getVideo(),
diff --git a/packages/media/src/video/video-for-rendering.tsx b/packages/media/src/video/video-for-rendering.tsx
index 2645703f104..b96a88ccf5e 100644
--- a/packages/media/src/video/video-for-rendering.tsx
+++ b/packages/media/src/video/video-for-rendering.tsx
@@ -51,6 +51,7 @@ type InnerVideoProps = {
 	readonly trimAfterValue: number | undefined;
 	readonly headless: boolean;
 	readonly onError: MediaOnError | undefined;
+	readonly credentials: RequestCredentials | undefined;
 };
 
 type FallbackToOffthreadVideo = {
@@ -80,6 +81,7 @@ export const VideoForRendering: React.FC<InnerVideoProps> = ({
 	trimBeforeValue,
 	headless,
 	onError,
+	credentials,
 }) => {
 	if (!src) {
 		throw new TypeError('No `src` was passed to <Video>.');
@@ -184,6 +186,7 @@ export const VideoForRendering: React.FC<InnerVideoProps> = ({
 			trimBefore: trimBeforeValue,
 			fps,
 			maxCacheSize,
+			credentials,
 		})
 			.then((result) => {
 				const handleError = (
@@ -383,6 +386,7 @@ export const VideoForRendering: React.FC<InnerVideoProps> = ({
 		cancelRender,
 		headless,
 		onError,
+		credentials,
 	]);
 
 	const classNameValue = useMemo(() => {
diff --git a/packages/media/src/video/video.tsx b/packages/media/src/video/video.tsx
index 77741e14d89..af47cd243e8 100644
--- a/packages/media/src/video/video.tsx
+++ b/packages/media/src/video/video.tsx
@@ -143,6 +143,7 @@ const InnerVideo: React.FC<
 				trimBeforeValue={trimBeforeValue}
 				headless={headless}
 				onError={onError}
+				credentials={credentials}
 			/>
 		);
 	}

From 80033f701bb5dc940bdc3f730beb889aed0f9d3e Mon Sep 17 00:00:00 2001
From: Jonny Burger <jonathanburger11@gmail.com>
Date: Tue, 17 Mar 2026 11:39:44 +0100
Subject: [PATCH 4/6] `remotion`: Fix correct display of trimmed
 `@remotion/media` video

---
 packages/core/src/use-media-in-timeline.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/use-media-in-timeline.ts b/packages/core/src/use-media-in-timeline.ts
index e8be7804de2..8bffae69152 100644
--- a/packages/core/src/use-media-in-timeline.ts
+++ b/packages/core/src/use-media-in-timeline.ts
@@ -53,7 +53,7 @@ export const useBasicMediaInTimeline = ({
 	const [initialVolume] = useState<VolumeProp | undefined>(() => volume);
 
 	const mediaDuration = calculateMediaDuration({
-		mediaDurationInFrames: videoConfig.durationInFrames,
+		mediaDurationInFrames: videoConfig.durationInFrames + (trimBefore ?? 0),
 		playbackRate,
 		trimBefore,
 		trimAfter,

From 1b7ac382699f7b1c3d6a9284c04fb43e8f948e8f Mon Sep 17 00:00:00 2001
From: Jonny Burger <jonathanburger11@gmail.com>
Date: Tue, 17 Mar 2026 11:46:43 +0100
Subject: [PATCH 5/6] `@remotion/studio`: Optimize performance when resizing
 window

---
 packages/studio/src/components/Timeline/Timeline.tsx |  4 +++-
 packages/studio/src/components/TopPanel.tsx          |  4 +++-
 packages/studio/src/helpers/use-breakpoint.ts        | 10 ++++++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/studio/src/components/Timeline/Timeline.tsx b/packages/studio/src/components/Timeline/Timeline.tsx
index 0ce708b180e..665398b6e82 100644
--- a/packages/studio/src/components/Timeline/Timeline.tsx
+++ b/packages/studio/src/components/Timeline/Timeline.tsx
@@ -42,7 +42,7 @@ const container: React.CSSProperties = {
 
 const noop = () => undefined;
 
-export const Timeline: React.FC = () => {
+const TimelineInner: React.FC = () => {
 	const {sequences} = useContext(Internals.SequenceManager);
 	const videoConfig = Internals.useUnsafeVideoConfig();
 
@@ -132,3 +132,5 @@ export const Timeline: React.FC = () => {
 		</div>
 	);
 };
+
+export const Timeline = React.memo(TimelineInner);
diff --git a/packages/studio/src/components/TopPanel.tsx b/packages/studio/src/components/TopPanel.tsx
index 492d72b41ca..76d9cf16522 100644
--- a/packages/studio/src/components/TopPanel.tsx
+++ b/packages/studio/src/components/TopPanel.tsx
@@ -51,7 +51,7 @@ export const useResponsiveSidebarStatus = (): 'collapsed' | 'expanded' => {
 	return actualStateLeft;
 };
 
-export const TopPanel: React.FC<{
+const TopPanelInner: React.FC<{
 	readonly readOnlyStudio: boolean;
 	readonly onMounted: () => void;
 	readonly drawRef: React.RefObject<HTMLDivElement | null>;
@@ -165,3 +165,5 @@ export const TopPanel: React.FC<{
 		</div>
 	);
 };
+
+export const TopPanel = React.memo(TopPanelInner);
diff --git a/packages/studio/src/helpers/use-breakpoint.ts b/packages/studio/src/helpers/use-breakpoint.ts
index b9ec03da279..5f7cbecb138 100644
--- a/packages/studio/src/helpers/use-breakpoint.ts
+++ b/packages/studio/src/helpers/use-breakpoint.ts
@@ -1,13 +1,19 @@
-import {useEffect, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 
 export function useBreakpoint(breakpoint: number): boolean {
 	const [compactUI, setCompactUI] = useState<boolean>(
 		window.innerWidth < breakpoint,
 	);
+	const compactUIRef = useRef(compactUI);
 
 	useEffect(() => {
 		function handleResize() {
-			setCompactUI(window.innerWidth < breakpoint);
+			const newValue = window.innerWidth < breakpoint;
+			if (newValue !== compactUIRef.current) {
+				setCompactUI(newValue);
+			}
+
+			compactUIRef.current = newValue;
 		}
 
 		window.addEventListener('resize', handleResize);

From c25c1ba35b9f78c175e70c11c0d41ace0bb1f8b8 Mon Sep 17 00:00:00 2001
From: Jonny Burger <jonathanburger11@gmail.com>
Date: Tue, 17 Mar 2026 11:51:36 +0100
Subject: [PATCH 6/6] Update AvailableFrom version to 4.0.437 for credentials
 prop

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/docs/docs/media/audio.mdx | 2 +-
 packages/docs/docs/media/video.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docs/docs/media/audio.mdx b/packages/docs/docs/media/audio.mdx
index edef83f6ca4..c8c92d2870b 100644
--- a/packages/docs/docs/media/audio.mdx
+++ b/packages/docs/docs/media/audio.mdx
@@ -227,7 +227,7 @@ export const MyComposition = () => {
 };
 ```
 
-### `credentials?`<AvailableFrom v="4.0.436" />
+### `credentials?`<AvailableFrom v="4.0.437" />
 
 Controls the [`credentials`](https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials) option of the `fetch()` requests made to retrieve the audio data.
 
diff --git a/packages/docs/docs/media/video.mdx b/packages/docs/docs/media/video.mdx
index 98e70d89de5..893768e7a90 100644
--- a/packages/docs/docs/media/video.mdx
+++ b/packages/docs/docs/media/video.mdx
@@ -269,7 +269,7 @@ export const MyComposition = () => {
 };
 ```
 
-### `credentials?`<AvailableFrom v="4.0.436" />
+### `credentials?`<AvailableFrom v="4.0.437" />
 
 Controls the [`credentials`](https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials) option of the `fetch()` requests made to retrieve the video data.