WordPress 网站如何插入哔哩哔哩自适应视频

很久之前，在我的导航站里，我写过一篇文章《WordPress 网站直接调用哔哩哔哩自适应视频教程》，详细介绍了如何在 WordPress 网站直接调用哔哩哔哩的自适应视频。但随着时间和 B 站视频播放代码的改进，我觉得，是时候再重新写一下最新的教程内容来分享给大家。相信大家看完这个教程后，就能够更方便在自己的网站中，插入 B 站的视频并做到设备自适应了。

首先，我们找到 B 站的任意一个视频，比如我们找到这个“2020 苹果 iPhone12 发布会-中文字幕-全程回放”的视频，地址是：https://www.bilibili.com/video/BV1Cp4y1r72P/，我们在视频下方点击分享并选择“嵌入代码”的方式，就会获得如下的“嵌入代码”：

<iframe src="//player.bilibili.com/player.html?aid=969951173&bvid=BV1Cp4y1r72P&cid=245418457&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

在这段代码中，我们能获取视频的aid信息，这个视频的aid就是969951173，所以我们可以将视频分享代码，修改成如下内容：

<iframe src="//player.bilibili.com/player.html?aid=969951173&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%"> </iframe>

大家可以看到，我们去除了源代码中的bvid和cid字段，插入了width="100%"的 CSS 样式，这样一来，我们调用的视频就可以是全宽显示了，但是要自适应，还要设定等比缩放的视频高度！因为在 CSS 中无法实现等比高度，所以，我们可以借助 js 代码内容，我们可以给这个 iframe 标签加一个 id，然后再写一段对应的 js 代码，比如我们设定一个jzbvideo的 id，则代码变为：

<iframe id="jzbvideo" src="//player.bilibili.com/player.html?aid=969951173&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%"> </iframe>

同时，我们还要在我们的主题 footer 中，加入以下代码：

<script type="text/javascript">if(document.getElementById("jzbvideo")){document.getElementById("jzbvideo").style.height=document.getElementById("jzbvideo").scrollWidth\*0.64+"px";}</script>

这段代码的意思就是视频显示高度是宽度的 0.64 倍，这个比例各位站长可以根据自己网站的内容来设置合适的高度，本站使用这个 0.64 是最佳的比例值！

调用效果如下（经典编辑器直接复制代码插入，古腾堡编辑器使用自定义 HTML 块加入）：

至此为止，我们所调用的 B 站视频，就可以做到设备自适应了，大家可以不必担心手机端查看时因为设置了固定高度而不能正常显示了！

版权声明

本文为 WordPress 建站帮原创内容，版权归本站所有。转载或引用请注明本文链接与出处：https://www.wpjzb.com/how-to-insert-bilibili-video-into-wordpress/