
唔,因为咱的模板不支持移动端的视频播放自适应,它是固定长宽的,所以关于这个问题咱之前就找到了解决方案。
方法一 「4:3」
/* 对移动端视频播放的友好 */
.meta-media {
position: relative;
margin-bottom: 30px;
float: left;
width: 100%;
height: 0;
padding-bottom: 75%;
}
.video {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
例子
<div class="meta-media">
<iframe class="video" style="display: block; margin-left: auto; margin-right: auto;" src="https://player.bilibili.com/player.html?aid=706&cid=3724723&page=1" width="800" height="500" frameborder="no" scrolling="yes" allowfullscreen="allowfullscreen">
</iframe>
</div>
效果图
方法二 「16:9」
这个是今天在逛CSDN的时候无意看到的,也是咱想起来写本文的原因。
/* 对移动端视频播放的友好 */
.meta-media {
width:100%;background: #000;
position:relative;
padding-bottom:56.25%; /*需要用padding来维持16:9比例,也就是9除以16*/
height: 0;
}
.video {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%
}
效果图
两种比例,咱还是比较喜欢4:3,所以一直都在用4:3,至于为什么要找大佬写好的嘛,唔,能白嫖为什么还要自己动脑子呢???水完了,快溜~
引用
https://blog.csdn.net/weixin_44548394/article/details/89857820
本文引用了一些网络文章,能找到原作者的已经注明原文链接,其中部分已经找不到原作者信息,如有侵权请及时联系我进行删除。谢谢~
联系邮箱:mxlbs@mxlbs.cn
Comments | 13 条评论
代码以拿走![smilies4]
@云中君 @云中君:唔,应该是“已”不是“以”吧?[smilies16]
@云中君 @云中君:不过呢,欢迎光临哦~[smilies14]
@东方幻梦 @东方幻梦:哈哈!
@云中君 @云中君:老哥你说话为啥老带感叹号吖[smilies16]感觉你就像生气了似的[smilies16]
@东方幻梦 @东方幻梦:习惯了!一般打字都加个标点符号!不要在意这些细节啦![smilies14]
@云中君 @云中君:额…好[smilies6][smilies16][smilies14]
@东方幻梦 @东方幻梦:以后换个句号吧。
@云中君 @云中君:要不你打个空格?[smilies10]
@东方幻梦 @东方幻梦:也行,哈哈
@云中君 @云中君:[smilies14][smilies25]
方法一和方法二,本质上是一样的。[smilies1]
@椎咲良田 @椎咲良田:唔,咱就是因为比例不同嘛,所以搬出来了「水文不要在意那么多啦」[smilies16]