General Creating a fullscreen HTML5 video background with CSS
Fullscreen background has become very popular in web design lately. Fullscreen images used as backgrounds have an amazing visual impact, but did you know that you can use video background in exactly the same way?
Video is probably the number one way to draw attention. A good video background can easily make people stop and take notice, increasing the time they spend on the site. This extended time on the site could potentially lead to more interaction with other content on the page.
Pulling off the video background effect is pretty simple. In fact it can be done using only CSS only. CSS background and background-image properties only accept colours, gradients, bitmaps and SVG as values. So what about the video?
We create a simple HTML5 video element with loop, autoplay and muted attributes and place it inside a container element. The image used in a poster attribute will be replaced by the first frame of the video when it loads. Therefore it’s good practice to use the first frame of a video for a poster image.
Add a few simple lines of CSS.
Now our video element has the width and height of the viewport (our browser window). This is a problem because in most cases our video element aspect ratio will be different than our video source aspect ratio (in this case 16:9).
Notice the white space on the top and bottom of the screen. We can fix this by stretching our video viewport to be larger than our browser viewport. We’ll make it taller or wider depending on the browser viewports aspect ratio. We can achieve this using media queries. Looks OK except now, when we resize the window, the video doesn’t center itself.
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. This is because 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.
Final CSS
NOTE: Video used in this demo was taken from this link.
More posts about background videos
– Tips for using background videos on the web
– Creating a fullscren HTML5 video background playlist
Article update – January 8, 2016
While I was writing the original article I was trying to avoid using CSS3 transform property since I knew it wasn’t supported in IE8. One thing that slipped my mind back then was that HTML5 video element also isn’t supported in the mentioned browser.
So with IE8 out of the way, let’s simplify the CSS used to create a fullscreen video background by using CSS3 transform.
As you can see, we removed the aspect ratio media queries and used the transform on our video element (.fullscreen-bg__video) instead. The fullscreen background video behaviour remains the same as you can see on this DEMO PAGE (which shares the same HTML markup as the first one).
This new code will work in all major browsers. As I said, it won’t work in IE8 since it doesn’t support CSS3 transform property. But you don’t have to worry about that since IE8 also has no support the HTML5 video element. So if you don’t plan to implement any fallbacks for the video element, go ahead and use the new code.
