BilibiliVideo and YouTubeVideo embed videos as a zero-request facade — placeholder stage, play button, caption — with no requests and no iframe at build time. The player loads after an explicit click, or when the facade approaches the viewport with preload="auto".

Bilibili

Demo videoBilibili

---
import BilibiliVideo from '../../../../components/kit/BilibiliVideo.astro';
---

<BilibiliVideo bvid="BV1DN411r7co" title="Demo video" p={1} />

YouTube

Demo videoYouTube

---
import YouTubeVideo from '../../../../components/kit/YouTubeVideo.astro';
---

<YouTubeVideo id="ladprn_jpHY" title="Demo video" preload="auto" />

Props

Shared props: title labels the caption and the iframe for accessibility; preload controls lazy loading — none keeps the facade static until clicked, auto initializes the player 240px before the facade enters the viewport (IntersectionObserver, one-shot).

PropType

bvid*string

Bilibili video ID (BV…, 10 suffix chars) — BilibiliVideo only.

pnumber

Bilibili part number.

Default1

id*string

YouTube video ID (11 characters) — YouTubeVideo only.

title*string

Video title — used for the caption and the iframe accessibility label.

preload'none' | 'auto'

Lazy-loading strategy for the player.

Default'none'

Notes

• The stage keeps a strict 16:9 ratio and never breaks the article layout.
• Player URLs are created only in the browser after activation: player.bilibili.com (high quality, danmaku off) and youtube-nocookie.com (rel 0, modest branding).
• The caption links to the watch page (Bilibili / YouTube) and opens in a new tab.
• Invalid props fail the build with a clear error instead of shipping a broken embed.
• For a link card with cover, title, description and uploader, use BilibiliCard instead of the playable facade.