css
.vid-wrap{
width:100%;background: #000;
position:relative;
padding-bottom:56.25%; /*需要用padding来维持16:9比例,也就是9除以16*/
height: 0;
}
.vid-wrap video{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%
}html
<div class="vid-wrap">
<video controls autoplay loop>
<source src="" type="video/mp4">
</video>
</div

本文介绍了一种利用CSS实现16:9宽高比视频布局的方法。通过设置div容器的padding-bottom属性为56.25%,并将其高度设为0,可以确保容器在不同屏幕尺寸下始终保持16:9的比例。内部的video元素使用绝对定位填充整个容器,实现了响应式视频播放。
1万+

被折叠的 条评论
为什么被折叠?



