Video

Video

Video embed with auto-detection for YouTube, Vimeo, and HTML5 video sources

Damarukam

Click to play

Installation

npx @ravikumarsurya/mdx-ui add video

Pass any video URL — the component auto-detects the source type.

<Video
  src="https://www.youtube.com/watch?v=Tn6-PIqc4UM"
  caption="React in 100 seconds"
/>

<Video
  src="https://www.youtube.com/watch?v=Tn6-PIqc4UM"
  title="React in 100 seconds"
  caption="A quick overview of React"
/>

Supports all YouTube URL formats:

<Video src="https://vimeo.com/123456789" caption="Demo walkthrough" />

<Video src="/demos/feature-demo.mp4" caption="Feature demo" />

Supports .mp4, .webm, .ogg. Renders a native <video controls> element.

<Video src="/demos/animation.mp4" autoPlay loop muted />

Note: browsers require muted for autoplay to work. When autoPlay is set, muted defaults to true automatically.

Prop	Type	Default	Description
`src`	`string`	—	Video URL or file path (required)
`title`	`string`	—	Title for iframes (accessibility)
`caption`	`string`	—	Caption below the video
`autoPlay`	`boolean`	`false`	Autoplay (HTML5 and YouTube/Vimeo)
`loop`	`boolean`	`false`	Loop (HTML5 only)
`muted`	`boolean`	`true` when autoPlay	Mute audio (HTML5 only)
`className`	`string`	—	Extra classes on the outer `<figure>`

On This Page