Usage
<Video> accepts a URL and figures out the right embed format on its own. Pass a YouTube watch URL, a Vimeo link, a Loom share URL, or a self-hosted mp4 — the component picks the right rendering path.
<Video src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Demo video" />Provider auto-detection
| URL pattern | Provider | Render |
youtube.com/watch?v=... or youtu.be/... | YouTube | iframe with youtube-nocookie.com/embed/{id} |
vimeo.com/123456789 | Vimeo | iframe with player.vimeo.com/video/{id} |
loom.com/share/... | Loom | iframe with loom.com/embed/{id} |
*.mp4, *.webm, *.ogg | mp4 | native <video controls> |
| Anything else | (fall through) | iframe with raw URL |
You can override auto-detection with the provider prop if your URL doesn't match a recognized pattern (e.g. self-hosted Vimeo on a custom domain).
Examples
<Video src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="YouTube embed" />
<Video src="https://vimeo.com/123456789" title="Vimeo embed" />
<Video src="https://loom.com/share/abc123" title="Loom recording" />
<Video src="https://www.w3schools.com/html/mov_bbb.mp4" title="Self-hosted mp4" />Aspect ratio
Default is 16/9. Override for square videos, vertical clips, or unusual ratios:
<Video src="..." aspectRatio="9/16" />
<Video src="..." aspectRatio="4/3" />
<Video src="..." aspectRatio="1/1" />The aspect ratio is enforced via CSS aspect-ratio so the layout stays stable while the iframe loads — no cumulative layout shift.
Autoplay
Pass autoplay to start the video immediately. Browsers block audio autoplay, so the component automatically mutes the video when autoplay is enabled.
<Video src="https://youtube.com/watch?v=..." autoplay />Use autoplay sparingly — it surprises readers and can be flagged by accessibility audits. Reserve it for hero/landing pages where the video is the main visual content.
Loop (GIF mode)
Pass loop for short, silent product demos that should repeat forever like a GIF — it implies muted autoplay and hides the player controls. Works with self-hosted mp4/webm sources (ignored for YouTube/Vimeo/Loom iframes).
<Video
src="/images/demos/custom-domain/custom-domain.mp4"
poster="/images/demos/custom-domain/custom-domain-poster.png"
loop
aspectRatio="16/10"
/>Always pair loop with a poster image — iOS won't paint a frame before playback starts, so a poster-less looping video renders as a black box on mobile while it loads.
A looping mp4 is 10–20× smaller than the equivalent GIF with no color banding — prefer it over actual .gif files.
Privacy: youtube-nocookie.com
YouTube embeds use the youtube-nocookie.com domain instead of youtube.com. This is YouTube's "enhanced privacy mode" — no cookies are set until the user starts playback. Helps with GDPR compliance and avoids cookie consent banner conflicts.
Props
| Prop | Type | Default | Description |
src | string | required | Video URL |
title | string | — | Caption text shown below the video |
provider | "youtube" | "vimeo" | "loom" | "mp4" | "auto" | "auto" | Override auto-detection |
aspectRatio | string | "16/9" | CSS aspect-ratio value |
autoplay | boolean | false | Start playing on mount (muted) |
loop | boolean | false | GIF mode — loop forever, muted autoplay, no controls (mp4/webm only) |
poster | string | — | Image shown before the video loads — strongly recommended with loop/autoplay (iOS shows a black box without one) |
For generic iframe embeds (CodeSandbox, StackBlitz, Figma, etc.), use <Embed> instead.