Embedding videos into Remotion

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

tsx
import React from'react';
import {OffthreadVideo, staticFile} from'remotion';
exportconstMyComp:React.FC= () => {
return <OffthreadVideosrc="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/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';
exportconstMyComp:React.FC= () => {
return <OffthreadVideosrc={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';
exportconstMyComp:React.FC= () => {
return <OffthreadVideosrc={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';
exportconstMyComp:React.FC= () => {
return <OffthreadVideosrc={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';
exportconstMyComp:React.FC= () => {
return (
 <Sequencefrom={60}>
 <OffthreadVideosrc={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';
exportconstMyComp: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';
exportconstMyComp:React.FC= () => {
return <OffthreadVideosrc={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';
exportconstMyComp:React.FC= () => {
return <OffthreadVideosrc={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';
exportconstMyComp:React.FC= () => {
return <OffthreadVideosrc={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

Using a local file​

Trimming​

Delaying​

Size and Position​

Volume​

Speed​

Looping​

GIFs​

See also​