Embedding videos into Remotion - Remotion

You can embed existing videos into Remotion by using the <OffthreadVideo> component.

tsx

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src="https://remotion.media/BigBuckBunny.mp4" />;
};

Using a local file

Put a file into the public folder and reference it using staticFile().

tsx

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} />;
};

Trimming

By using the trimBefore prop, you can remove the first few seconds of the video.
In the example below, the first two seconds of the video are skipped (assuming a composition FPS of 30).

tsx

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} trimBefore={60} />;
};

Similarly, you can use trimAfter to trim the end of the video.

tsx

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} trimBefore={60} trimAfter={120} />;
};

Delaying

Use the <Sequence> component to delay the appearance of a video.
In the example below, the video will start playing at frame 60.

tsx

import React from 'react';
import {OffthreadVideo, staticFile, Sequence} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <Sequence from={60}>
      <OffthreadVideo src={staticFile('video.mp4')} />
    </Sequence>
  );
};

Size and Position

You can size and position the video using CSS.
You'll find the properties width, height, position, left, top, right, bottom, margin, aspectRatio and objectFit useful.

tsx

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <OffthreadVideo
      src={staticFile('video.mp4')}
      style={{
        width: 640,
        height: 360,
        position: 'absolute',
        top: 100,
        left: 100,
      }}
    />
  );
};

Volume

You can set the volume of the video using the volume prop.

tsx

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} volume={0.5} />;
};

You can also mute a video using the muted prop.

tsx

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} muted />;
};

See Using Audio for more ways you can control volume.

Speed

You can use the playbackRate prop to change the speed of the video.

tsx

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} playbackRate={2} />;
};

This only works if the speed is constant. See also: Changing the speed of a video over time.

Looping

See: Looping an <OffthreadVideo>

GIFs

See: Using GIFs