如何在 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果酱」。