首页 前端知识 css对video进行满屏设置

css对video进行满屏设置

2024-03-04 10:03:25 前端知识 前端哥 857 58 我要收藏

需求描述:

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

实现步骤:

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

完整代码:

.box{
	overflow: hidden;
}

.box video{
	width: 100%;
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/3168.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!