Create Fullscreen HTML5 Page Background Video

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">

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;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    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. At this stage only Safari (mobile and desktop) requires the -webkit vendor prefix for transforms, so it has been included in the code; if you’re also targetting Firefox 15 or earlier, you’ll want to include a -moz prefixed version of the transform.

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"),
pauseButton = document.getElementById("vidpause");
function vidFade() {
vid.addEventListener('ended', function() {
    // only functional if "loop" is removed 
	// to capture IE10
pauseButton.addEventListener("click", function() {
	if (vid.paused) {;
		pauseButton.innerHTML = "Pause";
	} else {
        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).



Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Up ↑

%d bloggers like this: