Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
20th March 2014

Create fullscreen HTML5 responsive video backgrounds

Discover how to emulate the big looping wallpapers of www.ridebarstow.com by combining HTML5 video clips with some simple CSS trickery

Create fullscreen HTML5 responsive video backgrounds

DOWNLOAD THE FULL CODE

Video background

The Ride Barstow site opens with a single split-screen video clip, spread across the full width and height of the browser. If you resize the window you’ll notice the clip continues to play while adjusting dimensions accordingly. Crucially, in spite of the ratio changing, the clip never leaves any gaps or produces scrollbars within the browser window. Using just a few lines of CSS you can achieve a similar effect.

The video clips

In the opening instance Ride Barstow embeds three video clips named ‘split’ in three formats: MP4, OGV and WebM. They feature the same clip but are encoded to support each of the various codecs associated with the HTML5 <video> tag. The clip is only seven seconds long, but is set to autoplay and continuously loop. A poster attribute displays a static placeholder JPEG during any potential load delay:

001 <video id=”video1” loop autoplay    preload=”auto” poster=”split.jpg”>
002 <source src=”split.mp4” type=”video/mp4” />
003 <source src=”split.webm” type=”video/webm” />
004 <source src=”split.ogv” type=”video/ogg” />
005 </video>

Ratio-friendly CSS

Although the website also stipulates the dimensions of the <video> element, in our illustration we’ll leave this to the CSS. Reset the HTML and body margins as is good practice and define a class for the video named to match the id. Within this, set the width to 100% and the height to auto. In this instance the video will resize with the window, although only where the clip’s aspect ratio is preserved.

001 html, body{
002 margin: 0px;
003 padding: 0px;
004 }
005 
006    #video1
007 {
008 width: 100%;
009 height: auto;
010 }

Toggle the auto

Save the page and test it in your browser. If you resize the window disproportionately you will notice that we end up with white page space appearing below, as only the width fills the window. If you switch the CSS around so that the width is set to auto and the height is set to 100%, it no longer works and the video simply reverts to an original static size.

001 #video1
002
003 {
004 width: auto;    
005 height: 100%;
006 }  

Hide overflow

In order to fix this issue we need to do something simple but clever. What designers would typically do here is wrap the video object in a <div> element. This also offers an advantage for adding overlays and effects, but to keep things simple we’ll just add some CSS to our existing HTML body class. Set the height and width to 100% and, crucially, set the overflow to hidden – this is absolutely vital.

001 html,body
002 {
003    margin: 0px;
004    padding: 0px;
005 height: 100%;
006    width: 100%;
007    overflow: hidden;    
008    }

New dimensions

With overflow hidden in our containing element we can set the video to always have a minimum width and height of at least 100%. The aspect ratio is preserved by the overflow that extends beyond the window, which we know is hidden. What happens therefore is the browser is always full of video, leaving no gaps, page space or scrollbars, however resized!

001 #video1
002    {
003    min-width: 100%;
004    min-height: 100%;
005    }
Tags: ,
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • cybersholt

      zip file is corrupted

    • Nick Roberts

      Yeah, please re-upload I’d love to do this on my next project

    • http://www.webdesignreview.co.uk haris awais

      i tried it also but as i switch on to CSS ,video on the website doesn’t work still, i set the heigh and width also but not fixed, can anyone help?

    • Unknown

      change .txt extension name to .doc