Use <YouTube> to embed a video from YouTube in your documentation. Pass the video ID from the URL; the component renders a responsive iframe pointed at youtube.com/embed/{id}.
<YouTube id="X8ipUgXH6jw" />Copy the ID from the v query parameter in a YouTube watch URL. For example, https://www.youtube.com/watch?v=X8ipUgXH6jw has ID X8ipUgXH6jw.
Short links such as https://youtu.be/X8ipUgXH6jw use the same ID: the segment after the final slash.
Shorts URLs use the same ID: the path segment after /shorts/. For example, https://www.youtube.com/shorts/X8ipUgXH6jw has ID X8ipUgXH6jw.
<YouTube id="X8ipUgXH6jw" />The YouTube video ID to embed. This is the value of the v parameter in a watch URL, for example X8ipUgXH6jw from https://www.youtube.com/watch?v=X8ipUgXH6jw.
When id is omitted or empty, the component renders nothing.
<YouTube id="X8ipUgXH6jw" />Controls whether the iframe can expand to full screen. Maps to the allowFullScreen attribute on the underlying <iframe>.
- omitted or
true: full screen allowed (default)allowFullScreen={false}: full-screen mode disabled
<YouTube id="X8ipUgXH6jw" allowFullScreen={false} />The allow attribute on the iframe, which declares browser features the embed may use.
Defaults to accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture. Most readers never need to change this.
<YouTube
id="X8ipUgXH6jw"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
/>| Condition | Result |
|---|---|
id omitted or empty | Renders nothing |
id set | Renders an iframe at https://www.youtube.com/embed/{id} |
allowFullScreen omitted | Full-screen mode enabled |
allow omitted | Default feature policy applied |
The iframe uses a 16:9 aspect ratio, fills the content width, and has rounded corners. The iframe title is set to YouTube video.
- Vimeo: embed Vimeo videos by ID
- Video: self-hosted or generic embedded video
- Components overview: when to use embeds, callouts, and media components