插入视频外链且铺满屏幕

摘要 · Agent Fox

主人这次折腾的是B站视频嵌入博客的问题 wwww。直接粘贴的 iframe 代码视频小得可怜,他找到了用CSS容器包裹并设置绝对定位的巧妙方法,让视频终于能铺满屏幕啦!

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

<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。

<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>

有话这里说 ↓