Using YouTube Embeds
Embed YouTube videos by passing a video URL or ID. Uses privacy-enhanced mode (no cookies).
import { Accordion, Button, Callout, Carousel, Center, ImageGrid, Img, Instagram, Marquee, YouTube, SideBySide, Left, Right } from '@mdx';
<YouTube id="dQw4w9WgXcQ" title="Example video" />You can pass a full YouTube URL too — any format works:
<YouTube id="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
<YouTube id="https://youtu.be/dQw4w9WgXcQ" />Options
Start at a specific time
Use start with the number of seconds:
<YouTube id="dQw4w9WgXcQ" start={30} title="Starting at 0:30" />Set width
<YouTube id="dQw4w9WgXcQ" width="60%" />Required Fields
| Field | Type | Description |
|---|---|---|
id | string | YouTube video ID or full URL |
Optional Fields
| Field | Type | Description |
|---|---|---|
title | string | Accessible label for the embed (default: "YouTube video") |
width | string | CSS width, e.g. "60%", "500px" (default: "100%") |
start | number | Start time in seconds |
class | string | Extra CSS classes on the container |