BilibiliVideo 与 YouTubeVideo 把视频嵌入为零请求 facade——占位舞台、 播放按钮、题注——构建期零请求、零 iframe。播放器在读者显式点击后加载； 配置 preload="auto" 时，卡片临近视口即提前初始化。

Bilibili

演示视频Bilibili

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

<BilibiliVideo bvid="BV1DN411r7co" title="演示视频" p={1} />

YouTube

演示视频YouTube

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

<YouTubeVideo id="ladprn_jpHY" title="演示视频" preload="auto" />

参数

公共参数：title 用于题注与 iframe 的无障碍描述；preload 控制懒加载—— none 保持纯占位直到点击；auto 在卡片进入视口前 240px 时经 IntersectionObserver 一次性初始化播放器。

参数类型

bvid*string

Bilibili 视频 BV 号（共 10 位后缀）——仅 BilibiliVideo。

pnumber

Bilibili 分 P 编号。

默认值1

id*string

YouTube 视频 ID（11 位字符）——仅 YouTubeVideo。

title*string

视频标题，用于题注与 iframe 的无障碍描述。

preload'none' | 'auto'

播放器懒加载策略。

默认值'none'

说明

• 舞台锁定 16:9 比例，绝不撑破文章排版。
• 播放器地址仅在浏览器激活后创建：player.bilibili.com（高画质、关弹幕） 与 youtube-nocookie.com（rel 0、modest branding）。
• 题注外链指向 Bilibili / YouTube 观看页，新标签打开。
• 非法参数会让构建直接报错，而不是发布损坏的嵌入。
• 需要带封面、标题、简介与 UP主 的链接卡片时，请使用 BilibiliCard。