如何在 WordPress 博客中插入哔哩哔哩视频

上次让大家关注我的B站账号之后,感谢大家的帮忙,现在终于突破了两位数的粉丝。

插入B站视频到博客

这几天我把B站的视频搬到博客中,发现 WPJAM Basic 早已经支持了短代码的方式插入B站视频。简单的通过下面的短代码即可:

[bilibili]https://www.bilibili.com/video/BV1RF411u7xS[/bilibili]

效果如下:

非常方便,只要知道视频的地址贴入即可。

优化B站视频展示

但是插入之后,发现视频的大小很难和模板适配,为了适配模板,一般会设置视频的 iframe 宽度为 100%,然后宽度和高度比例是 4 : 3。

后面查了一下,原来 CSS 已经有 aspect-ratio 属性了,它为 box 容器规定了一个期待的纵横比,这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。

这样我们就可以为视频的 iframe 设置样式为:width: 100%; aspect-ratio: 4/3; 然后它就能自动适配了。

查了一下这个属性,基本现代浏览器都支持了:

最后还是欢迎大家关注一下我的B站账号,也是「WordPress果酱」。


©我爱水煮鱼,本站推荐使用的主机:阿里云,国外主机建议使用BlueHost

本站长期承接 WordPress 优化建站业务,请联系微信:「chenduopapa」。