remotion-dev/remotion · error · Error

<OffthreadVideo> is not supported in @remotion/web-renderer.

Error message

<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations

What it means

`<OffthreadVideo>` relies on server-side frame extraction (it pulls still frames from a media URL via the Remotion server). This is not available in `@remotion/web-renderer` (client-side rendering), so the component hard-throws when `useRemotionEnvironment().isClientSideRendering` is true.

Source

Thrown at packages/core/src/video/OffthreadVideo.tsx:38

) => {
	// Should only destruct `startFrom` and `endAt` from props,
	// rest gets drilled down
	const {
		startFrom,
		endAt,
		trimBefore,
		trimAfter,
		name,
		pauseWhenBuffering,
		_remotionInternalStack,
		showInTimeline,
		...otherProps
	} = props;
	const environment = useRemotionEnvironment();
	const shouldPauseWhenBuffering = resolveV5Default(pauseWhenBuffering);

	if (environment.isClientSideRendering) {
		throw new Error(
			'<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations',
		);
	}

	const onDuration = useCallback(() => undefined, []);

	if (typeof props.src !== 'string') {
		throw new TypeError(
			`The \`<OffthreadVideo>\` tag requires a string for \`src\`, but got ${JSON.stringify(
				props.src,
			)} instead.`,
		);
	}

	validateMediaTrimProps({startFrom, endAt, trimBefore, trimAfter});

	const {trimBeforeValue, trimAfterValue} = resolveTrimProps({
		startFrom,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Replace `<OffthreadVideo>` with `<Video>` from `@remotion/media` when running client-side.
2. Keep `<OffthreadVideo>` only in compositions rendered via the server/CLI/Lambda pipeline.
3. Confirm your runtime environment: check `useRemotionEnvironment().isClientSideRendering`.

Example fix

// before
import {OffthreadVideo} from 'remotion';
<OffthreadVideo src={url} />
// after (client-side rendering)
import {Video} from '@remotion/media';
<Video src={url} />

import {useRemotionEnvironment} from 'remotion';
const env = useRemotionEnvironment();
if (env.isClientSideRendering) {
  // render <Video> from @remotion/media instead
}

const isCSR = () => useRemotionEnvironment().isClientSideRendering;

When it happens

Trigger: Using `<OffthreadVideo>` in a project where Remotion is configured for client-side rendering (`@remotion/web-renderer` / Player in CSR mode), or shipping a composition built for SSR rendering into a CSR runtime.

Common situations: Switching a project from server rendering to client-side rendering (Player), or migrating a composition that used `<OffthreadVideo>` into a Player-based app without swapping the video component.

Related errors

• <Html5Audio> is not supported in @remotion/web-renderer. Use
• <Html5Video> is not supported in @remotion/web-renderer. Use
• Failed to create WebGL shader
• Failed to create WebGL program
• Failed to create WebGL vertex array

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/5e8ba749b5a9cf6b. Report an issue: GitHub.