'Fitting background video

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?

htmlcssbackground


Solution 1:[1]

You may also want to add: object-fit

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

Solution 2:[2]

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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Bogdan V

Related Questions