侧边栏壁纸
博主头像
听得入迷博主等级

走一走看一看

  • 累计撰写 116 篇文章
  • 累计创建 20 个标签
  • 累计收到 7 条评论

目 录CONTENT

文章目录

b站iframe宽度自适应

听得入迷
2021-12-05 / 0 评论 / 0 点赞 / 119 阅读 / 239 字

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

<!--把下面这个放在header引用样式-->
<link href="https://cdn.jsdelivr.net/gh/tdrme/site@main/css/iframe_video.css" rel="stylesheet">

<!--插入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>
0

评论区