Fitting background video-CodePudding

How can i fit this video on the whole screen?

I have used the below code

<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. Is this because the video size is too small to fit in the whole screen?

CodePudding user response：

You may also want to add: object-fit

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

CodePudding user response：

You need to set the width and height for the video container first. Your container now is then:

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

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