Create a Fullscreen Video Background with only CSS

Eduardo | 2016-07-08

How to insert an HTML5 Video on a website and use it as an animated fullscreen background only with CSS and HTML, no JavaScript required.

Many of you have seen these amazing websites with a beautifull background video and text on top. Many years ago this was only possible in dreams or with the use of flash making a very heavy to load website.

Today HTML, CSS and media queries have made it not only a reality but also very simple to do:

1) First of all you need to get a video, in one of our previous posts we published an article about 10 of the best Free video sites out there, So go ahead, pick one and go top the next step.

2) Add the video to youyr site using the HTML5 video tag and add the source to the video, you will need to wrap a video a division that will be used to position the video on the background. We will name this division videoBgWrapper: