Skip to main content

Embedding videos into Remotion

You can embed existing videos into Remotion by using the <Video> from @remotion/media component.

import React from 'react';
import {Video} from '@remotion/media';

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

Using a local file​

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

import React from 'react';
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <Video 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).

import React from 'react';
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

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

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

import React from 'react';
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <Video 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.

import React from 'react';
import {Video} from '@remotion/media';
import {Sequence, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <Sequence from={60}>
      <Video 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.

import React from 'react';
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <Video
      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.

import React from 'react';
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

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

You can also mute a video using the muted prop.

import React from 'react';
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <Video 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.

import React from 'react';
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <Video 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​

Use the loop prop to restart the video when it reaches the end.

Looping a video
import React from 'react';
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

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

To learn how looping interacts with trimBefore and trimAfter, see Order of operations.

GIFs​

See: Using GIFs

See also​