Subscribe by Email

So you’ve seen videos being used as backgrounds across the web and you’re thinking ‘how do I do that?’. The main issue usually being making the video cover the entire screen. Normally when you set a video it will resize in accordance with its aspect ratio, meaning it won’t cover the entire background. Well don’t worry, for I am here to guide you on your enthralling quest towards background video freedom. Read on, young warrior.

Getting off the ground

First off, set up a div with the video you want as the background, and then have a content div for putting all the content. Don’t forget to take a screenshot of the video and save it as a jpg called poster.jpg. This will serve as a background for users who do not have browsers that support the video tag.

Great! Now all we gotta do is figure out how to make the video fit the entire screen. We have to use a bit of Javascript magic to make this work:

A little bit of Javascript

As discussed, the issue is that the video aspect ratio will make the video very difficult to cover the entire screen. How do we fix this? Well we need to make a comparison of the aspect ratio of the window against the aspect ratio of the video. Then we can multiply the width of the video by this calculation making the video always fill the screen, no matter what size the user’s screen is.

Don’t forget to include jQuery! Your code should look a bit like this:

Now the video will cover the entire screen size on user resize or anything! Things to note:

Mobiles dont support autoplayed videos, so we can't do this on mobile. Instead we'll show an image as a background called poster.jpg.

Same goes for IE8 and below! For those browsers the poster.jpg image will be used instead.

Full screen background videos are really exploding on the web design scene, so I'm sure you'll find a use for it at some point. The footage I'm using is from Vimeo's free HD Stock Footage, so go check that out. Have a great day!

But in Safari and Firefox (first load it works), when I refresh, width and height of browser is not “injected” in the css… So my content doesn’t appear correctly… Can you have a solution to fix it ?
Look over here : http://josso-palettes.com/wordpress

Thanks for the quick tip. I’m wondering though how would you adjust the code so that the video played within a div with a width of 100% but a set height, rather than extending to the height of the entire window?