Video Embedding

Add videos to make your content more engaging and informative.

YouTube

Embed YouTube videos using the component:

<YouTube id="dQw4w9WgXcQ" />

Or with a full URL:

<YouTube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />

Options

<YouTube
  id="dQw4w9WgXcQ"
  title="Video Title"
  start={30}
/>

Option	Description
id	YouTube video ID
url	Full YouTube URL
title	Video title for accessibility
start	Start time in seconds

Bilibili

For Bilibili videos:

<Bilibili bvid="BV1xx411c7mD" />

Or with AV number:

<Bilibili aid="123456789" />

Options

<Bilibili
  bvid="BV1xx411c7mD"
  page={1}
  title="Video Title"
/>

Option	Description
bvid	Bilibili BV ID
aid	Bilibili AV number
page	Part number (for multi-part videos)
title	Video title

Self-Hosted Videos

For videos in your public/ folder:

<Video src="/videos/demo.mp4" />

Options

<Video
  src="/videos/demo.mp4"
  poster="/images/video-cover.jpg"
  autoplay
  muted
  loop
/>

Option	Description
src	Video file path
poster	Cover image URL
autoplay	Auto-play on load
muted	Muted by default
loop	Loop playback
controls	Show controls (default: true)

HTML5 Video

You can also use standard HTML5:

<video
  src="/videos/demo.mp4"
  controls
  width="100%"
  poster="/images/cover.jpg">
  Your browser doesn't support video.
</video>

Multiple Sources

<video controls width="100%">
  <source src="/videos/demo.webm" type="video/webm">
  <source src="/videos/demo.mp4" type="video/mp4">
  Your browser doesn't support video.
</video>

Video Formats

Format	Extension	Support
MP4 (H.264)	.mp4	Best compatibility
WebM	.webm	Good compression
Ogg	.ogv	Open format

Responsive Videos

Videos are responsive by default. For custom aspect ratios:

<div style="aspect-ratio: 16/9;">
  <Video src="/videos/demo.mp4" style="width: 100%; height: 100%;" />
</div>

Best Practices

External Embedding

For other platforms, use their embed codes:

<iframe
  src="https://player.vimeo.com/video/123456789"
  width="640"
  height="360"
  frameborder="0"
  allowfullscreen>
</iframe>

---

Next: Icons to add visual elements.