每日一技

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

发布日期:
更新日期:
WordPress 网站如何插入哔哩哔哩自适应视频

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

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

HTML
<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,所以我们可以将视频分享代码,修改成如下内容:

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

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

HTML
<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 中,加入以下代码:

HTML
<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 这个插件,也是很不错的选择:

郑重声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

您认为这篇文章有用吗?

点击下方为它评星!

平均星级: / 5. 评星数:

暂无评星,立刻首评!

本文作者:Yephy Wang

WordPress建站帮创始人

如果本文“对您有用”,欢迎随意打赏 WordPress 建站帮,让我们坚持创作!
赞赏一杯咖啡

赞赏 WordPress 建站帮

赞赏二维码

请通过支付宝、微信 APP 扫一扫,海外读者可「使用 PayPal 赞赏

“ 感谢您对 WordPress 建站帮的支持! ”

发表评论