1.视频全屏展示(适应各种屏幕尺寸)

视频全屏展示(适应各种屏幕尺寸)

大概效果

方法一(不兼容所有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%);
}