视频以16:9比例自适应

计算方式

利用的是 margin/padding,百分比是按宽度计算

播放器以 16:9 的比率显示,值为 9/16 * 100 = 56.25

实例

<div class="mod_video">
  <video src=""></video>
</div>
.mod_video{
  width: 80%;
  margin: 0 auto;
}

.mod_video video{
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-top: 56.25%;
}

2023-01-07T01:48:29.png

最后修改:2023 年 10 月 08 日 04 : 52 PM

发表评论