视频移动端自适应

[zhangsanshi]

网页代码PC、移动用的是同一套。其中在PC端，视频库在元素上写死了宽高，导致在移动端高度显示不正常。想到之前的利用padding做指定比例的容器框。就有了如下解决方案

[id^=id_video_container] {
  @media (--mobile) {
    position: relative;
    height: 0!important;
    padding-top: 56.25%;
    margin: 15px 0;
  }
}
[id^=trump_main_unique] {
  @media (--mobile) {
    position: absolute!important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

重点是 56.25 这段。目前视频比例是16:9。所以有 100/(16/9) = 56.25。而 padding margin 百分比是基于宽度计算的，所以就实现了比例。当然要和运营约定一下视频比例固定为 16:9。