---
image: /generated/articles-docs-videos-index.png
title: Embedding videos into Remotion
sidebar_label: Adding a video
crumb: 'How To'
---

You can embed existing videos into Remotion by using the [`<Video>` from `@remotion/media`](/docs/media/video) component.

```tsx twoslash
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](/docs/terminology/public-dir) and reference it using [`staticFile()`](/docs/staticfile).

```tsx twoslash
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`](/docs/media/video#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 twoslash
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`](/docs/media/video#durationinframes) to select how many source frames should play.

```tsx twoslash
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`](/docs/media/video#from) prop to delay the appearance of a video.
In the example below, the video will start playing at frame 60.

```tsx twoslash
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.

```tsx twoslash
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`](/docs/media/video#volume) prop.

```tsx twoslash
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`](/docs/media/video#muted) prop.

```tsx twoslash
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](/docs/audio/volume) for more ways you can control volume.

## Speed

You can use the [`playbackRate`](/docs/media/video#playbackrate) prop to change the speed of the video.

```tsx twoslash
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](/docs/videos/accelerated-video).

## Looping

Use the [`loop`](/docs/media/video#loop) prop to restart the video when it reaches the end.

```tsx twoslash title="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](/docs/timing).

## GIFs

See: [Using GIFs](/docs/gif)

## See also

- [`<Video>` from `@remotion/media`](/docs/media/video)
- [Comparison of video tags](/docs/video-tags)
- [Using Audio](/docs/using-audio)