想在博客里面插入一个视频外链,比如哔哩哔哩的。b站可以自动生成嵌入网页的代码。

1
<iframe src="//player.bilibili.com/player.html?aid=251103305&bvid=BV1Ev411375K&cid=435166987&page=2" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

但是粘贴进来以后,视频特别的小,没有充满整个空间。

image-20220811155821812

解决方法是给iframe标签外面套上一个固定长宽比,且宽度为100%的div,然后把iframe设置成绝对位置,且充满整个div。

1
2
3
<div class="bilibili" style="position: relative; width: 100%; padding-bottom: 75%;">
<iframe src="//player.bilibili.com/player.html?aid=251103305&bvid=BV1Ev411375K&cid=435166987&page=2" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%;"> </iframe>
</div>

这样就变大了。

image-20220811160235652

参考: