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} />;
};

Use durationInFrames to select how many source frames should play.

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} durationInFrames={60} />;
};

Delaying​

Use the from prop 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 {staticFile} from 'remotion';

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

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 durationInFrames, see Timing and trimming.

GIFs​

See: Using GIFs

See also​