# Video

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

A video file with playback controls, or a YouTube, Vimeo or Loom video - with a width and a caption.

`Video` shows a video file, or a video from YouTube, Vimeo or Loom. It knows which from `src`: a file ending in `.mp4`, `.webm`, `.ogg` or `.mov` plays in the browser's own player; any other address is embedded.

## A video file

<Video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" width="480px" caption="A video file, with the browser's controls." />

```mdx
<Video src="/videos/flower.mp4" width="480px" caption="A video file, with the browser's controls." />
```

A file in your project is a path from the project folder, like an image.

## An embedded video

Use the video's **embed** address - for YouTube, `https://www.youtube.com/embed/<id>`, not the `watch?v=` one:

<Video src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="480px" title="A YouTube video" caption="An embedded YouTube video." />

```mdx
<Video src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="480px" title="A YouTube video" caption="An embedded YouTube video." />
```

## A looping clip

For a short clip that plays like an animated image - a UI interaction, say - turn on `autoplay` and `loop`, and turn off `controls`. A video that plays by itself is always muted, since browsers block autoplay with sound:

<Video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" width="320px" autoplay loop controls={false} />

```mdx
<Video src="/videos/clip.mp4" width="320px" autoplay loop controls={false} />
```

## Props

**`src`** `string` required

A video file - a path or URL - or a video's embed address.

**`width`** `string` default: `100%`

The video's width on a wide screen - any CSS width, like `"80%"` or `"500px"`.

**`caption`** `string`

Text under the video. With a caption, the video sits in a bordered card.

**`title`** `string`

The video's name, for screen readers - set it on an embedded video.

**`controls`** `boolean` default: `true`

The player's controls. Video files only - an embed shows its own.

**`autoplay`** `boolean` default: `false`

Plays as soon as the page loads, muted. Video files only.

**`loop`** `boolean` default: `false`

Starts again at the end. Video files only.

**`muted`** `boolean` default: `false`

Starts with the sound off. Video files only.