|
| 1 | +--- |
| 2 | +title: Video |
| 3 | +description: Embed videos from YouTube, Vimeo, and Loom |
| 4 | +--- |
| 5 | +import { Video } from "@barodoc/theme-docs/components/mdx/Video.tsx"; |
| 6 | +import { ParamField, ParamFieldGroup } from "@barodoc/theme-docs/components/mdx/ParamField.tsx"; |
| 7 | + |
| 8 | +Embed videos from YouTube, Vimeo, and Loom with a responsive player and optional caption. |
| 9 | + |
| 10 | +## YouTube |
| 11 | + |
| 12 | +<Video client:load url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Demo video" caption="A YouTube video embedded with the Video component" /> |
| 13 | + |
| 14 | +```mdx |
| 15 | +<Video client:load url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Demo video" caption="A YouTube video" /> |
| 16 | +``` |
| 17 | + |
| 18 | +## Vimeo |
| 19 | + |
| 20 | +```mdx |
| 21 | +<Video client:load url="https://vimeo.com/123456789" title="Vimeo video" /> |
| 22 | +``` |
| 23 | + |
| 24 | +## Loom |
| 25 | + |
| 26 | +```mdx |
| 27 | +<Video client:load url="https://www.loom.com/share/abc123def456" title="Loom recording" caption="Screen recording" /> |
| 28 | +``` |
| 29 | + |
| 30 | +## Supported URL Formats |
| 31 | + |
| 32 | +| Provider | Formats | |
| 33 | +|----------|---------| |
| 34 | +| YouTube | `youtube.com/watch?v=ID`, `youtu.be/ID`, `youtube.com/embed/ID` | |
| 35 | +| Vimeo | `vimeo.com/ID`, `player.vimeo.com/video/ID` | |
| 36 | +| Loom | `loom.com/share/ID`, `loom.com/embed/ID` | |
| 37 | + |
| 38 | +## Props |
| 39 | + |
| 40 | +<ParamFieldGroup> |
| 41 | + <ParamField name="url" type="string" required> |
| 42 | + Video URL from YouTube, Vimeo, or Loom |
| 43 | + </ParamField> |
| 44 | + <ParamField name="title" type="string"> |
| 45 | + Accessible title for the iframe (defaults to provider name) |
| 46 | + </ParamField> |
| 47 | + <ParamField name="caption" type="string"> |
| 48 | + Caption text displayed below the video |
| 49 | + </ParamField> |
| 50 | + <ParamField name="client:load" type="directive" required> |
| 51 | + Required Astro directive for client-side interactivity |
| 52 | + </ParamField> |
| 53 | +</ParamFieldGroup> |
0 commit comments