非常小脑的搜了很多内容,讲的那是天花乱坠。实际上好多搜到的都在拉伸视频,或者视频不会自动填充。最后还是自己写了,这里附上我自己写的的最终代码。
.background {
z-index: -1;
position: fixed;
width: 100%;
height: 100vh;
top: 0px;
background-color: red;
overflow: hidden;
}
.background>video {//只有这部分重要,前面那部分用你自己的
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: 100%;
object-fit: cover;
}
<div class="background">
<video loop muted="yes" playsinline autoplay>
<source src="/video/autoplay.mp4"/>
</video>
</div>