# Video

Renders a `src` as either a native `<video>` or an `<iframe>` embed, auto-detected — no separate prop to pick one. A `src` ending in a recognized video file extension (`.mp4`, `.webm`, `.ogg`, `.mov`, ...) gets a real `<video controls>`; anything else (a YouTube, Vimeo, or Loom embed URL) gets an `<iframe>`. Same card language as [Image](/docs/content/components/image/)/[Frame](/docs/content/components/frame/) — same border-radius, and the same optional `caption` inside a bordered card:

<Video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" width="420px" caption="A local/hosted video file renders as a real <video> element" />

<Video src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="420px" caption="An embed URL renders as an iframe instead" />

```mdx
<Video src="media/paylink1.mp4" width="500px" />

<Video src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="500px" />
```

**`Video` props**

<Parameter name="src" type="string" required>
  A video file path/URL, or an embed URL.
</Parameter>

<Parameter name="width" type="string" default="100%">
  A CSS width (`"500px"`, `"80%"`, ...) applied at full screen width.
</Parameter>

<Parameter name="caption" type="string">
  Omit it and the video renders with no card background, same as `Image`'s own `caption`.
</Parameter>

<Parameter name="controls" type="boolean">
  Only applies to the `<video>` case; ignored for an iframe embed, which controls its own playback through the embed URL itself.
</Parameter>

<Parameter name="autoplay" type="boolean">
  Only applies to the `<video>` case. Forces `muted` on too, since browsers block unmuted autoplay outright.
</Parameter>

<Parameter name="loop" type="boolean">
  Only applies to the `<video>` case.
</Parameter>

<Parameter name="muted" type="boolean">
  Only applies to the `<video>` case.
</Parameter>

<Parameter name="title" type="string">
  The accessible name for the embed/video.
</Parameter>