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

本文介绍了如何在 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果酱」。


点击卡片关注「WordPress果酱」 每天分享 WordPress 使用技巧

⏬⏬ 下载 WPJAM Basic 请点击阅读原文

这篇关于如何在 WordPress 博客中插入哔哩哔哩视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!