如何在 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;
然后它就能自动适配了。
查了一下这个属性,基本现代浏览器都支持了:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2022/05/1651411666-image.png?imageMogr2/auto-orient/thumbnail/!1280x378r/gravity/Center/crop/1280x378/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)
最后还是欢迎大家关注一下我的B站账号,也是「WordPress果酱」。