Responsive CSS3 / HTML5 Video Background In div No Javascript Needed!

HTML5 Video

Ugh! So this took me the better part of a day, on a holiday weekend when I shouldn’t be working. Either way I want to get this out there ASAP. I needed a HTML5 video background to appear inside a:

on my web page. Did I mention that the page was responsive (Bootstrap) and the video needed to scale to width without destroying the aspect ratio, oh and that the containing div has a FIXED HEIGHT!!! Yeah, fun stuff considering I had never attempted this before. So, with some HTML5 and CSS3 trickery… I was able to accomplish this without having to use JavaScript at all! I mean, isn’t that the point of HTML5?

I am going to cover more than just how to apply some code to your page in this tutorial. I wasn’t sure where to start when it came to HTML5 video tags, so I want to share with you the entire process of taking a video from your computer and making it a useful website div element. Let’s get started.

FIRST AND FOREMOST:

I found this awesome little piece of open source goodness called “Miro Video Converter”. This software allows you to convert your video files to the filetypes needed to execute the video on your website. Which I haven’t even got to yet, but I suggest taking a second right now to download this. Visit their website here.

Being that I got ahead of myself a little bit there, let’s get back on track. When planning on adding a video to your website as a background you must first have a video. This video should be at least 720P resolution and shouldn’t exceed 30 seconds in length as we’re going to just loop the video for the effect. So, you need to produce your own video for this to work. And you might actually have to “produce your video” in the sense that you may want to edit or trim it to a specific length. In my case, I used iMovie (for Apple) to strip the video of any volume because I find that annoying on websites (when video’s autoplay on a website and there is volume added). That being said, put some thought into the video you want to use and try to keep in mind that the actual video on the web page will only show a narrow window of the total video size. This is not a page background video tutorial, this one is for div background video.

Assuming you found your video, you’re going to need to convert it to THREE different filetypes:

• .mp4
• .ogv
• .webm

…two of which I am extremely unfamiliar with (webm/ogv) but that fancy Miro Video Converter handled converting my .MOV file to the above mentioned filetypes. If the video file you’re working with is currently .mp4, I would suggest running it through the Miro program anyway.

NEXT STEP:

Let’s go ahead and upload the THREE video filetypes to your server at a destination of your choice. For my example, I will be using the /img folder for storing my video files. You can name your folder anything you want, just remember the name for later implementation.

NOW… we need to do some HTML coding and CSS styling to make this happen. The following examples are based on the header of this page. I have a full width header that scales down with the page width but maintains a fixed height. If you want your div to re-size with the page, this tutorial will not work for you. Although, I think you will learn enough about what’s going on to figure it out on your own after getting this working.

LETS ADD THE CSS:

Open up your CSS file and add the following code at the bottom:

The KEY to keeping the video contained within my “.header-unit” div is the “overflow: hidden;” attribute of the “#video-container” div id. Try removing that attribute and see what happens to the size of your video… It goes over the borders of the containing div. Some other important attributes of the above CSS are the “absolute” positioning used on the “#video-container” ID and “video” element. These ensure that the video placement has an “absolute” value (something that responsive web designers HATE!) which does not change. Also, the “z-index” attribute of the video element may have to be adjusted according to your containing div’s current attributes (IE: a background image or logo you would want to place above the video). Be extremely careful using the “z-index” because it can drastically affect your entire site by layering divs incorrectly. If all else fails, set the “z-index” back to “0” and your page should return to normal.

PLEASE NOTE:

the class “.header-unit” is only there for the purpose of showing you the div class in which I wish to contain the video. It will show up again when we get down to the HTML part. Anyhow, you could be applying this to a completely different div element with different variables but the main point of attention regarding the “.header-unit” is the fact that it’s 150px high… fixed height.

THE HTML:

The following HTML will need to be customized to fit your filenames and path’s. But, it’s really pretty simple.

The HTML5 aspect of the above code is the “video” tag. If you notice, within the opening video tag, I have added “autoplay” and “loop” before the class declaration. These are native HTML5 video commands. Autoplay will start the video automatically, without the need for a play button. Loop will keep the video on an infinite loop while the website is loaded. There are more options that you can find by searching for “HTML5 video options”.

CONCLUSION:

That’s really about all there is to make this work. Although if you’re going to just copy and paste my code, I would suggest trying this on a test page rather than your current live website. Remember, its full width in this example and that may not be what you want.

THE UNFORTUNATE REALITY:

These cool little video’s struggle on mobile devices as of yet. Sometimes they work, sometimes they don’t, sometimes it wants to play in a stand-alone video player app. I am constantly experimenting to find a happy medium between desktop and mobile for these videos but have yet to lay down anything 100% solid. Any help would be appreciated on this.

WORKAROUND FOR FIREFOX!

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

AddType audio/mpeg .mp3
AddType audio/ogg .ogg
AddType audio/mp4 .m4a
AddType audio/wav .wav

As the compatibility grows, I will make sure it works here so check back. LIVE DEMO BELOW!!! 🙂

As always, thanks for visiting my website and I look forward to your comments.
Video below:

If you found this article helpful, please share on social media.