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

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


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

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

效果图