首先，我们找到 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 站视频，就可以做到设备自适应了，大家可以不必担心手机端查看时因为设置了固定高度而不能正常显示了！
当然，如果您有自托管的视频，并且还使用了古腾堡编辑器的话，还可以试一下 WPlyr Media Block 这个插件，也是很不错的选择：