Use <Video> to embed a self-hosted or generic video file in your documentation. The component renders a native HTML5 <video> element with a single <source> child. Pass a publicly accessible URL to an MP4, WebM, or other supported format.
For YouTube or Vimeo, use <YouTube> or <Vimeo> instead.
<Video src="https://cdn.example.com/demo.mp4" type="video/mp4" />Pass a full https URL to a file you host (on your own CDN, object storage, or any public address the reader's browser can fetch). Unlike <Image>, <Video> does not resolve repo-relative paths from /docs; the src value is used as-is on the <source> element.
| Approach | How |
|---|---|
| CDN or object storage | Upload the file and use the public URL in src |
| Raw GitHub URL | Link to the raw file URL from your repository |
| External host | Any https address the reader's browser can fetch |
<Video src="https://cdn.example.com/guides/install.mp4" type="video/mp4" />The sample below uses a public demo file. Replace src with your own hosted video URL in production docs.
<Video
src="https://cdn.example.com/demo.mp4"
type="video/mp4"
/>Set type to the video MIME type when you know it, for example video/mp4 or video/webm. This helps the browser select the correct source. When omitted, the browser infers the format from the URL or file extension where possible.
<Video src="https://cdn.example.com/clip.webm" type="video/webm" />The video file URL passed to the <source> element. Must be a full http or https address that readers can load in the browser.
When src is omitted or empty, the component renders nothing.
<Video src="https://cdn.example.com/walkthrough.mp4" type="video/mp4" />Optional MIME type for the video source, for example video/mp4, video/webm, or video/ogg.
<Video src="https://cdn.example.com/clip.mp4" type="video/mp4" />| Condition | Result |
|---|---|
src set | Renders an HTML5 <video> with one <source> child and playback controls |
src omitted or empty | Renders nothing |
type set | Passed to the <source> element's type attribute |
type omitted | <source> has no type attribute; browser infers format where possible |
The component applies default layout styles: full width, 16:9 aspect ratio, and rounded corners. Native playback controls are always enabled. It does not accept muted, autoPlay, loop, or other native <video> attributes; only src and type are implemented.
<Video> does not add captions or subtitles. For accessible video, host a file that includes captions where possible, or link out to a platform player that supports them.
- YouTube: embed YouTube videos by ID
- Vimeo: embed Vimeo videos by ID
- Image: images with repo-relative paths and zoom
- Components overview: when to use media embeds and other components