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号,所以要在视频播放页面空白处点击鼠标右键,查看页面源代码:

哔哩哔哩如何找到AV号

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

添加为可重用区块

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

WP古腾堡编辑器,添加到可重用区块

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

WP使用可重用区块

题外话:

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