关于移动端视频播放的自适应

发布于 2019-07-24  1,811 次阅读


唔,因为咱的模板不支持移动端的视频播放自适应,它是固定长宽的,所以关于这个问题咱之前就找到了解决方案。

方法一 「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


只是当时已惘然。