Video

The Video component embeds videos from local files or popular platforms like YouTube and Vimeo.

Usage

Code

mdx

1<Video 
2  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
3  caption="Example video"
4/>

Code

mdx

1<Video 
2  src="/videos/demo.mp4"
3  caption="Product demo"
4  controls
5  poster="/videos/poster.jpg"
6/>

YouTube video embed example

Prop	Type	Default	Description
`src`	`string`	required	Video URL (YouTube, Vimeo, or local path)
`caption`	`string`	-	Caption below the video
`autoplay`	`boolean`	`false`	Auto-play video on load
`loop`	`boolean`	`false`	Loop video playback
`muted`	`boolean`	`false`	Mute video audio
`controls`	`boolean`	`true`	Show video controls
`poster`	`string`	-	Poster image URL (local videos only)

Supports various YouTube URL formats:

Supports Vimeo URLs:

Supports standard video formats:

Warning

Autoplay is often blocked by browsers unless the video is also muted. For auto-playing videos, use both `autoplay` and `muted`:

Code

mdx

1<Video src="/videos/animation.mp4" autoplay muted loop />

Tip

Use the `poster` prop for local videos to show a preview image before the video loads.