前言

最近在写文章的时发现插入bilibili视频尺寸小了亿点点，影响观看体验。在查阅了许多教程之后解决了这个问题。

优化前

优化后

优化教程

第一步

source/css/custom.css里，添加css的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*哔哩哔哩视频适配*/
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  margin: 3% auto;
  text-align: center;
}
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

然后在inject head里面引用

第二步

找一段bilibili视频嵌入代码，比如

1
<iframe src="//player.bilibili.com/player.html?aid=903290989&bvid=BV16P4y197J1&cid=909744025&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
1
2
3
<div align="center" class="aspect-ratio">
把视频嵌入代码加在中间，然后在文章里引用
</div>

小细节

值得注意的是，整个代码不能和其他文字连在一起，必须有间隔，不然会失效。