拟合背景视频

Question

如何让这个视频适合整个屏幕？

我用过下面的代码

<style>

*{
   margin: 0px;
   padding: 0px;
}
#sky-video{
       position: fixed;
       width: 100%;
       height: 100%;
       z-index: -100;
   }

</style>

<body>
   <video src="videos/Sky.mp4" autoplay muted loop id="sky-video">You brower does not support vidoes</video>
   
</body>

Here you can see there is a gap in right and left of the video. 是因为视频尺寸太小，放不下整个屏幕吗？

Answer 1

您可能还想添加：object-fit

#sky-video {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -100;
    object-fit: cover;
}

Answer 2

您需要先设置视频容器的宽度和高度。您现在的容器是：

body {
 display: block;
 width: 100%;
 height: 100vh;
 position: relative;
}

body #sky-video {
 width: 100%;
 height: auto;
 object-fit: cover;
}

拟合背景视频

Fitting background video

html

css

background