3
video标签样式铺满全屏
source link: https://blog.p2hp.com/archives/9796
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
video标签样式铺满全屏 | Lenix Blog
video标签是不会自动铺满整个div的，即便是给它设置了高度为100%；所以当需要video标签铺满整个div时，可以给video标签加上‘object-fit:fill’样式，这样就可以解决了！
<div class="videoContent">
<video class="videoElement" controls preload="auto" width="100%" height="100%"></video>
</div>
.videoContent{
background-color: rgb(40, 46, 83);
width: 600px;
height: 420px;
}
.videoElement{
object-fit: fill;
}
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
fill: 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK