Polina

filmed by Alexander Wagner 2011

original article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.

Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.

Considerations and Limitations

Before achieving this, there some factors you should consider:

With these factors in mind, let’s look at techniques for making the video happen, using a piece shot by Alexander Wagner.

A Pure CSS Approach

Build the HTML5 video as usual:

<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="polina.webm" type="video/webm">
<source src="polina.mp4" type="video/mp4">
</video>

Important: the order of the video files is vital; Chrome currently has a bug in which it will not autoplay a .webm video if it comes after anything else.

The poster image will be replaced by the first frame of the video once it loads, so it makes sense to derive that image from the same first frame.

To make the video fullscreen:

video#bgvid { 
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover; 
}

Older browsers will not recognize the video formats, but should still recognize the basic <video> tag (with the exception of IE8, detailed below). For those browsers we create a background-image for the element, using the same placeholder picture.

Dealing With Mobile

Displaying the fullscreen background video on mobile devices presents several challenges:

  1. Most mobile platforms (iOS in particular) will refuse to autoplay HTML5 video to avoid potentially ruinous data charges.
  2. In such cases the video will be displayed with an embedded play button, which in turn…
  3. …may capture touches on the device, locking out links that may be in the content on top of the video.

While it is possible to feature-detect support for video autoplay with JavaScript (a technique I will cover in a future article), the easiest solution is to use a media query that switches off the video entirely on smaller screens, substituting the placeholder image in the background. To the existing CSS, add:

@media screen and (max-device-width: 800px) {
body { background: url(polina.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}

The media query itself is the most important part, and will need to be modified based upon both the expectations of the site and a changing mobile space. Currently, it detects if the display screen is physically less than 800 pixels wide, and if so switches the video for a static background image. Note that this ignores Retina: an iPad 3 will still register a horizontal resolution of 768px under this media query, even though its actual resolution is far higher.

Integrating Accessibility

Users with vestibular disorders can become motion-disoriented, especially when trying to read text in front of a moving image, while users on the autism spectrum can be disturbed by rapid change. For those users – and everyone else – a pause button should be within easy reach. Ideally, the video should also stop and fade out when it has played through once. To make this happen, add a <button> element to the page:

<button id="vidpause">Pause</button>

Then some JavaScript to the bottom of the page:

var vid = document.getElementById("bgvid");
var pauseButton = document.getElementById("vidpause");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "Pause";
} else {
vid.pause();
 pauseButton.innerHTML = "Paused";
}
})

The JavaScript calls on some CSS added to your stylesheet (with vendor prefixes removed for clarity):

video#bgvid { transition: 1s opacity; }
.stopfade { opacity: .5; }

(Of course, you should also write CSS to make the button element disappear on mobile devices, given the solution above: otherwise, the button will appear on iPhones, etc without any apparent purpose).

Pure JavaScript Alternatives

While I would argue that a HTML5 / CSS solution is better than a framework, there’s at least one JQuery plugin and some fairly well-established JavaScript code that creates the results shown here.