WordPress插入哔哩哔哩（bilibili）视频实现自适应宽度

2021/6/6 更新：

目前直接使用哔哩哔哩的分享代码已经可以实现自适应宽度，因此不用再麻烦使用第三方代码。

---

近期在一个 WP 网站上有插入 B站视频的需求，一开始我想到的是安装视频播放器插件，例如国人制作的 Smartideo。

Smartideo 这款插件支持优酷、搜狐视频、土豆、56、腾讯视频、新浪视频、酷6、华数、乐视、YouTube 等网站，也支持哔哩哔哩，但是最近一次更新已经是一年前，且最新版本存在哔哩哔哩在Android手机上无法播放的问题，因此我就放弃了。

看到 B站有 iframe 代码，添加到文章之后发现无法自适应宽度，导致视频挤成一团，很不协调。在网上搜索解决方案，终于找到可以让 B站视频自适应宽度的代码。

代码如下：

<iframe id="spkj" src="https://player.bilibili.com/player.html?aid=你要分享的视频AV号&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%"> </iframe>
<script type="text/javascript">  
document.getElementById("spkj").style.height=document.getElementById("spkj").scrollWidth*0.76+"px";
</script>

在 WP 后台写文章时添加一个自定义HTML区块，填写以上代码，把“你要分享的视频AV号”替换成视频对应编号就可以了。不过这个编号要从哪里获取呢？

获取哔哩哔哩视频 AV 号

目前 B站已经更改链接格式，我们无法直接从链接中获取 AV号，所以要在视频播放页面空白处点击鼠标右键，查看页面源代码：

如图中箭头指出的 583623415 就是视频的AV号了。如果想看实际插入效果，可以参考 让CGTN纪录片《巍巍天山——中国新疆反恐记忆》传遍世界 一文的文末。

添加为可重用区块

如果我的网站以后还需要插入哔哩哔哩的视频，有什么办法可以更快捷一些呢？既然这个代码要通过文章的自定义HTML区块插入，那么我们就可以把它添加到可重用区块：

等到下次要引用 B站视频时，只需在文章编辑器上选择之前添加好的可重用区块，修改AV号就行了。

---

题外话：

随着哔哩哔哩的转型，越来越多的视频创作者集聚B站，爆发式增长的内容也吸引了越来越多的用户。没有广告干扰的纯粹播放体验一定会让B站越来越火爆，所以，假如还没有加入 B站大家庭的话千万不要错过这趟车：注册哔哩哔哩。