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%