Website Custom Components

Global Vue components available in all VitePress markdown pages.

---

YouTube

Embed a YouTube video with responsive 16:9 aspect ratio.

Usage

<YouTube id="dQw4w9WgXcQ" />

<YouTube id="dQw4w9WgXcQ" title="Optional accessible title" />

Props

Prop	Type	Required	Default	Description
id	string	yes	—	YouTube video ID (the part after v=)
title	string	no	"YouTube video"	Accessible title for the iframe

How to find the video ID

https://www.youtube.com/watch?v=dQw4w9WgXcQ
                                 ^^^^^^^^^^^
                                 this is the id

---

Audio

Embed an audio player with optional title caption.

Usage

<Audio src="/audio/episode-01.mp3" />

<Audio src="/audio/episode-01.mp3" title="Episode 1: Getting Started" />

<Audio src="https://example.com/audio.ogg" type="audio/ogg" title="External file" />

Props

Prop	Type	Required	Default	Description
src	string	yes	—	Path to audio file (relative to public/ or absolute URL)
title	string	no	""	Caption displayed above the player
type	string	no	""	MIME type hint (e.g. audio/mpeg, audio/ogg)

Hosting audio files

Place files in website/public/audio/ — they're served at /audio/filename.mp3.

website/public/
  audio/
    episode-01.mp3
    interview.ogg

---

Implementation

• Components live in website/.vitepress/theme/components/
• Registered globally in website/.vitepress/theme/index.ts via app.component()
• Styles in website/.vitepress/theme/custom.css
• YouTube uses padding-bottom trick for responsive 16:9 iframe
• Audio uses native <audio controls> with VitePress theme-aware background