So, you want a beautiful full screen background HTML5 video on your site, don’t you?
Let’s look at the demo first: mdavid626.com.
First of all, you will need a fancy video clip. If you already have one, great! If not, then don’t worry you can find plenty of them for free on this site:
coverr.co: beautiful, free videos for your homepage
All right, so you picked one? Absolutely amazing, let’s go on.
Today most modern browses support native HTML5 video. Just go to caniuse.com to check it out:
Basically, every browser supports it. Even Internet Explorer. Great!
Not so fast… On mobile, most of the browsers just won’t play silent background video without user interaction. The user has to initiate the play manually. This means our video just won’t work. The browsers won’t even download the first frame of the video. This means, you will see basically nothing.
Therefore, we will use a little workaround here. We’ll place a static cover image as a background for the video. If the browser doesn’t understand the video tag or just chooses not to play or download it, then the user will see the cover image. Which is of course not the so fancy as the video, but it’s good enough.
To add the video just use this simple markup:
Of course, you can add additional source elements, supporting more media types, like OGG or WEBM. Add every format you have. Make sure you configured the proper MIME types on your web server. See this page for more details.
Start with this little CSS for providing better cross-browser consistency in the default styling of HTML elements:
If you use a library like Bootstrap, then you probably have something similar there already, so you can ignore it.
Positioning of the video element is really simple:
Ideally, you would want to use the
background-image CSS property to position the video. Unfortunately, you cannot use it for a video element, because it is not (yet?) supported. So, we have to use a little trick here. We move the (0,0) point from the top left corner to the center of the screen. Then, with a simple CSS3 transform, position it back to the top left corner. The result is a properly stretched full screen video.
One very important thing is to set the proper size of the video. You might use the
Which at first seems to be working just fine. But the stretching will not work entirely properly. Just look at this video:
You will see the background cover image and then the first frame of the video. Do you see the problem? They are not positioned and stretched exactly the same. I think it is because of the aspect ratio of the video. So, we’ll have to consider the aspect ratio of the browser window to set width and height of the video.
My video’s aspect ratio is 16:9 so I’ll use this code:
To style the cover image use this markup:
Nothing fancy here, it’s really simple. Basically, it’s using the
background-image CSS property with the clever
background-size value. The image will be stretched properly.
So, the final code looks like this:
Feel free to comment if you have any question or just need a little help.