视频全屏展示(适应各种屏幕尺寸)
方法一(不兼容所有IE)
object-fit:fill;
<div class="banner">
<video
src="@/assets/video/yun.mp4"
autoplay
style="width:100%;height:100%;object-fit:fill;"
loop
muted
></video>
</div>
css
.banner {
width:100%;
height:100vh; // 浏览器视口大小
}
viewport 可视窗口
单位 | 说明 |
---|---|
vw | 可视窗口的宽度,1vw等于viewport宽度的1% |
vh | 可视窗口的高度,1vh等于viewport高度的1% |
缺点
不兼容所有IE
方法二
定位 + 超出隐藏
分析
装视频的盒子(banner)可以设置为浏览器整屏的宽度、高度,视频等比例显示:长度100%,但是高度在等比例的时候会超出banner盒子的高度
想法
banner:相对定位
视频:绝对定位 + 水平垂直居中(width:100%,高度适应,超出banner盒子的隐藏)
(由于超出的部分不影响整体的展示)
.home .banner {
position: relative;
/* width: 100vw; */
width: 100%;
height: 100vh;
}
.home-video {
position: absolute;
top: 50%;
left: 50%;
width: 100%; // 不设置100%的话,视频无法全屏,两侧会有留白
transform: translate(-50%, -50%);
}