I’m sure you’ve seen it implemented in some sites before. Maybe you’ve wondered how it was done. The truth is, it’s simple. Background video isn’t some big time CSS trickery. It’s just a video in an absolutely positioned container, set behind some content. However, if we want to make our video “cover” the available background space, we need to leverage some tricks. I’m going to set three different min-width media query breakpoints, and force the video to be this width and centred. This will give the illusion that it’s always covering the available space.

The easiest way to fix this is to stretch the video to be taller and wider than our screen then use the negative margins to centre it.
That’s it! We have a full screen video background for our website!

One more thing we should do is hide the video on mobile and just show the background image since most mobile platforms won’t autoplay HTML5 video and will display it with an embedded play button on top of our content. In this example we will use the same image that is used for poster attribute in the video.

Keep in mind that using display: none on the video element won’t prevent it from downloading.

The easiest way to fix this is to stretch the video to be taller and wider than our screen then use the negative margins to centre it.
That’s it! We have a full screen video background for our website!

One more thing we should do is hide the video on mobile and just show the background image since most mobile platforms won’t autoplay HTML5 video and will display it with an embedded play button on top of our content. In this example we will use the same image that is used for poster attribute in the video.

Keep in mind that using display: none on the video element won’t prevent it from downloading.

The easiest way to fix this is to stretch the video to be taller and wider than our screen then use the negative margins to centre it.
That’s it! We have a full screen video background for our website!

One more thing we should do is hide the video on mobile and just show the background image since most mobile platforms won’t autoplay HTML5 video and will display it with an embedded play button on top of our content. In this example we will use the same image that is used for poster attribute in the video.

Keep in mind that using display: none on the video element won’t prevent it from downloading.