技术教程 · 2026-06-17 · 1 分钟阅读

b站iframe插入视频大小是不能自适应的，所以用固定比例的方式使之适应网页宽度。

固定长宽比例为16/9，保持宽度100%。

/*b站iframe优化*/
.iframe_video{
        position:relative;
        height:0;
        padding-bottom:56.25%;
        overflow:hidden
}
 
.iframe_video embed,.iframe_video iframe,.iframe_video object{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%
}

CSS是从MDUI复制过来的，原理就是保持长宽比例为16/9，使用的时候用<div class="iframe_video"> </div>套住

引用以上CSS然后：
 
<!--插入iframe视频的时候用这个div套住-->
<div class="iframe_video">
<iframe src="//player.bilibili.com/player.html?aid=626346337&bvid=BV16t4y1Q7Wr&cid=210274319&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" > </iframe>
</div>