视频演示¶
下面这段 YouTube 视频通过原生 <iframe> 嵌入,使用 YouTube 官方播放器,完全免费、无需 API key,可在 Chrome / Edge / Firefox / Safari 等主流浏览器中正常播放。
视频不自动播放,加载后从 第 0 秒 开始,由访客手动点击播放。
哔哩哔哩案例¶
下面这段 B 站视频同样通过原生 <iframe> 嵌入,使用 B 站官方播放器(player.bilibili.com),完全免费、无需 API key,可在 Chrome / Edge / Firefox / Safari 及主流国产浏览器中正常播放。
技术说明¶
- 嵌入方案(两个平台均免费):
- YouTube:原生 iframe 播放器(
youtube.com/embed/视频ID),免费、免注册、免付费。 - 哔哩哔哩:原生 iframe 播放器(
player.bilibili.com/player.html?bvid=视频ID&page=分P),同样免费、无需 API key,使用 B 站官方分享弹窗生成的嵌入代码即可。 - 均从 0 秒开始、不自动播放:YouTube 移除
?start=参数即从开头播放;B 站追加&t=0同样从开头播放。两个 iframe 的allow属性均不含autoplay,因此页面加载后不会自动播放,需访客手动点击。 - 响应式:外层用
padding-bottom: 56.25%(16:9)实现自适应宽高比,在手机到桌面屏都不变形。 - 隐私增强(YouTube 可选):可将域名换成
youtube-nocookie.com,功能与兼容性完全一致。
如需更换视频:YouTube 改
src中的视频 ID(如需指定起始时间再加?start=秒);B 站改bvid与page(起始时间用&t=秒)。两处均默认不自动播放。