需求描述:
当我们需要将视频满屏放置在屏幕上时,发现设置width: 100%;
height: 100%;
达不到想要的满屏效果。这时只需要以下两步即可实现此需求!
实现步骤:
第一步: 只需要设置video元素的宽为100%,高度不需要设置。
代码:width: 100%;
第二步: 在video的父元素中设置隐藏多余部分。
代码:overflow: hidden;
完整代码:
.box{
overflow: hidden;
}
.box video{
width: 100%;
}