首先，找到我们需要在网站中插入的 Bilibili 视频链接，比如：
https://www.bilibili.com/video/BV1zg4y157Gy
我们可以看到，这个视频链接中，有一个以 BV 开头的字段：BV1zg4y157Gy，这个就是该视频的bvid，接下来，我们在网站中需要插入该视频的地方，使用古腾堡编辑器插入一个自定义 HTML 的 Block 块，并在里面输入以下代码：
<iframe src="//player.bilibili.com/player.html?bvid=BV1zg4y157Gy&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>
我们可以看到，代码中的bvid对应的就是：BV1zg4y157Gy。同时我们还在代码中加入了宽度的样式，使播放器宽度能够达到 100% 页面宽度。但是还有自适应的问题，我们还要设定等比缩放的视频高度！因为在 CSS 中无法实现等比高度，所以，我们可以借助 JavaScript 代码内容（此方法由强大的 ChatGPT 人工智能给出），我们给这个 iframe 标签加一个 class 类，然后再写一段对应的 JavaScript 代码，比如我们设定的这个 class 类名称为 jzbvideo，则代码变为：
<iframe class="jzbvideo" src="//player.bilibili.com/player.html?bvid=BV1zg4y157Gy&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>
同时，我们还要在我们的主题 footer 中，加入以下 JavaScript 代码：
<!-- script type="text/javascript"> var elements = document.getElementsByClassName("jzbvideo"); for (var i = 0; i < elements.length; i++) { var element = elements[i]; element.style.height = element.scrollWidth * 0.5625 + "px"; }</script -->
将这段代码中的注释部分去除：
- 开头的“<!--”改为“<”；
- 结尾的“-->”改为“>”；
这段 JavaScript 代码的意思是浏览器渲染页面时会检查名为 jzbvideo 的 CSS 类，不管有几个都会检查出来，然后就给它设定视频显示高度是宽度的倍，这个比例是 16:9 视频的标准比例尺寸！代码插入后，我们就可以查看调用效果了。
PS：这个插入后视频会自动播放，如果要关闭自动播放，可以在视频链接后面加上&autoplay=0
最新评论