Full Page Background Video Styles

I bet you’ve seen it. A video background that takes up the entire browser window. There is text on top of it (hence, “background”), which is an interesting effect that you don’t see every day. The biggest reason you don’t, probably, is that you can’t set a movie file as the background-image in CSS. You’ll have to do some layout trickery to get it done.

Certainly, full page background video can be just A BIT MUCH. I’d argue it can be done tastefully. I’m not particularly interested in a design philosophy debate here (perhaps another time), but instead the how-to of getting it done if you need to, as well as some different patterns it might take the form of.

It’s still worth mentioning the basics of tastefulness here:

  • No sound. At least by default. Opt-in sound is acceptable.
  • Respect bandwidth. Video is about the heaviest thing you can put on a website, and this is video that people didn’t exactly ask for, so mind that.
  • Keep it accessible. You’re probably putting text on top of the video, so make sure it has enough contrast to be readable.

Let’s do this thing Montana style, in honor of the trip Media Temple and I are taking to visit ZaneRay.

The How-To of Full Page Background Video

We’re in luck here. Dudley Story has already done a lot of research about this and has a nice setup we can use. He’s also got a demo page.

We need to put the video on the page, of course, so here’s that:

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

There are a lot of attributes there! The poster attribute gives the video an image to show while the video is loading or in case the video doesn’t load at all. You might also want to use a background in CSS.

The autoplay attribute is there because we are wanting the video to automatically play. Remember we’re being tasteful here, so this is OK. There is no controls attribute, so there is no way for the user to start/stop the video. The playsinline attribute is so this works on iOS. The muted attribute is just in good taste (the video shouldn’t have audio anyway, but also, is requires on iOS to get the autoplay working. Then loop makes it, well, loop.

To cover the entire page with the video, you can do this:

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

That’ll get you full page video! Nice!

Now let’s look at some patterns. There is just one way to handle full page video, but there are a number of things we could do.

Just One Viewport

We’ve plopped the video into place. Now we can set whatever we want on top of it.

Take some text like this:

<header class="viewport-header">
  <h1>
    Explore
    <span>Montana</span>
  </h1>
</header>

We can place that after the video and relative position it, so it appears on top. Then apply a little centering:

.viewport-header {
  position: relative;
  height: 100vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

We have the simplest possible effect (see demo):

 

We could also position other things that we like anywhere on the page. It’s not particularly en vogue, but we could even drop an area of text that scrolls independently, such that the “full page” affect remains intact. (see demo)

 

One Viewport Header, Scrolls Away

The video can remain full screen, and have other elements scroll away. There is no reason the header needs to stay fixed! In this demo, the header text (which still fills the viewport exactly) scrolls away and the body copy comes up as you would expect. It’s even lightly transparent, showing the video behind still.

Here’s that demo:

One Viewport Header, Content Scrolls Over Header

The header text we placed over the video could remain fixed, and the content could slide up on top of it. One way to pull that off is to fixed position the video and header but still make sure the main content is pushed off the viewport, by using margin-top: 100vh; Here’s that demo:

 

Taking that a smidgen further, we could wire up some opacity and scale changes to scroll position and have the header text fade away into the background on scroll. Easily done with CSS custom properties! Here’s that demo.

 

One idea, lots of ways!

Comments

  • Wellington Geek

    Nice!

  • Thank you very much for this useful topic.

  • I didn’t know that you can auto play video on mobile phones …until now! Thank you Chris!

  • Abe Simpson

    Thanks Chris! This was very helpful, although I’m not getting the text shrink effect on that last pen.

    • KonRud5

      Same here, the last pan doesn’t work as expected, `opacity` and `scale` are remain 1.

    • Sean Landsman

      Same here – would really like to see this working if possible. Thanks for the good article

  • > Keep it accessible. You’re probably putting text on top of the video, so make sure it has enough contrast to be readable.

    Thanks for keeping accessibility in mind, but text contrast is only a tiny part of making animations accessible. The baseline is that users need to be able to pause animation if they find it distracting. Autoplay video without a pause or stop button is not accessible. WCAG 2.0 says, in Success Criterion 2.2.2: “Any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential.” – Essential would be a mandatory ad, for example. In a note, it clarifies: “Since any content that does not meet this success criterion can interfere with a user’s ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion.” (More info on accessibility criteria for animation: https://www.w3.org/WAI/WCAG20/quickref/?currentsidebar=%23col_overview&tags=animation)

    Add a keyboard accessible pause button to the page; it should be one of the first things in the tab order to let users find it quickly. You should also honor the prefers-reduced-motion media query as shown in the WebKit blog a few days ago: https://webkit.org/blog/7551/responsive-design-for-motion/

    (Disclaimer: I work for W3C/Web Accessibility Initiative and produce education materials for accessible web design with the Education and Outreach Working Group, for example, the Web Accessibility Tutorials: https://www.w3.org/WAI/tutorials/ – This comment is my view only.)

  • Mayoor Mb

    html,
    body {
    height: 100vh;
    overflow-x: hidden;
    }
    html {
    font-family:”Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;
    font-size: 150%;
    line-height: 1.4;
    }
    body {
    margin: 0;
    }

    .video-header {
    position: fixed;
    text-align: center;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index:0;
    }
    video {
    background: brown;
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    }
    .viewport-header {
    display: flex;
    align-items: center;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    opacity: 1;
    transform: scale(1);
    }
    h1 {
    font-family: ‘Syncopate’, sans-serif;
    color: white;
    text-transform: uppercase;
    letter-spacing: 3vw;
    line-height: 1.2;
    font-size: 3vw;
    text-align: center;
    }
    h1 > span {
    display: block;
    font-size: 10vw;
    letter-spacing: -1.1vw;
    }
    main {
    background: white;
    position: relative;
    padding: 1rem;
    margin-top: 100vh;
    z-index:1;
    }
    main::before {
    content: “”;
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: -100vh;
    }
    p {
    max-width: 600px;
    margin: 1rem auto;
    }

    Explore Montana

    Montana is a western state defined by its diverse terrain ranging from the Rocky Mountains to the Great Plains. Its wide-open spaces include Glacier National Park, a vast wilderness preserve that passes into Canada. The park’s many snow-capped peaks, lakes and alpine hiking trails are showcased along its famed Going-to-the-Sun Road, stretching 50 miles.
    Montana State University is ranked in the top tier of U.S. research institutions by the Carnegie Foundation for the Advancement of Teaching. Located in Bozeman Montana, Montana State is an accredited land grant university offering bachelor’s, master’s and doctoral degrees in 150 fields of study.
    Maybe it’s the independent frontier spirit, wild and free and oh-so-American, that earned Montana its ‘live and let live’ state motto. The sky seems bigger and bluer. The air is crisp and pine-scented. From mountains that drop into undulating ranchlands to brick brewhouses and the shaggy grizzly found lapping at an ice-blue glacier lake, Montana brings you to that euphoric place, naturally. And then it remains with you long after you’ve left its beautiful spaces behind.

    var f = function(){
    var viewportHeader = document.querySelector(“.viewport-header”);

    window.addEventListener(“scroll”, function(event) {
    //console.log(document.body.scrollTop)
    var opacity = (document.body.offsetHeight – document.body.scrollTop) / document.body.offsetHeight;

    var scale = (document.body.offsetHeight – document.body.scrollTop) / document.body.offsetHeight;
    var height = window.innerHeight – document.body.scrollTop;
    viewportHeader.style.setProperty(‘opacity’, opacity);
    viewportHeader.style.setProperty(‘transform’, “scale(” + scale + “,” + scale +”)”);
    viewportHeader.style.setProperty(‘height’, height+”px”);

    },false);
    };
    document.addEventListener(‘DOMContentLoaded’, f, false);

  • Chris, curious what your approach is for browsers that don’t support `object-fit` ( http://caniuse.com/#search=object-fit ). I’ve had to fallback to a static image implemented as a CSS background-image for IE and Edge when I’ve done this in the past.

  • Carol

    Hi Chris,

    Just a fellow developer here – I wanted to say thanks for all your articles, they’re really well written and fun to read! I always click on them when I see my Media Temple newsletter, keep up the wonderful posts

Related Articles