b站iframe宽度自适应


技术247 阅0 评

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>
最后更新 2023-06-03
评论 ( 0 )
OωO
隐私评论