css对video进行满屏设置

需求描述:

当我们需要将视频满屏放置在屏幕上时,发现设置width: 100%; height: 100%; 达不到想要的满屏效果。这时只需要以下两步即可实现此需求!

实现步骤:

第一步: 只需要设置video元素的宽为100%,高度不需要设置。
代码:width: 100%;
第二步: 在video的父元素中设置隐藏多余部分。
代码:overflow: hidden;

完整代码:

.box{
	overflow: hidden;
}

.box video{
	width: 100%;
}

你可能感兴趣的:(前端,css,前端)