教程

首先，找到我们需要在网站中插入的 Bilibili 视频链接，比如：

https://www.bilibili.com/video/BV1AZ421u7rL/

我们可以看到，这个视频链接中，有一个以 BV 开头的字段：BV1AZ421u7rL，这个就是该视频的bvid，接下来，我们在网站中需要插入该视频的地方，使用编辑器插入一个自定义 HTML 的 Block 块，并在里面输入以下代码：

<iframe src="//player.bilibili.com/player.html?bvid=BV1AZ421u7rL&autoplay=0&;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>

我们可以看到，代码中的bvid对应的就是：BV1AZ421u7rL,同时我们还在代码中加入了宽度的样式，使播放器宽度能够达到 100% 页面宽度。但是还有自适应的问题，我们还要设定等比缩放的视频高度！因为在 CSS 中无法实现等比高度，所以，我们可以借助 JavaScript 代码内容，我们给这个 iframe 标签加一个 class 类，然后再写一段对应的 JavaScript 代码，比如我们设定的这个 class 类名称为 jzbvideo，则代码变为：

<iframe class="jzbvideo" src="//player.bilibili.com/player.html?bvid=BV1AZ421u7rL&autoplay=0&;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>

同时，我们还要在我们的主题 footer .php中，</body>之前加入以下 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 类，不管有几个都会检查出来，然后就给它设定视频显示高度是宽度的0.5625倍，这个比例是 16:9 视频的标准比例尺寸！代码插入后，我们就可以查看调用效果了。

效果演示

一些话

很开心这篇教学文章能够帮助到大家，如果转载请标注原文地址哦，十分感谢！