My article on using CSS to position HTML5 videos as fullscreen web page backgrounds has proven to be one of the most popular on this site, but the technique has a significant challenge in that it forces users to host their own videos, or to find a service to do so.

The obvious alternative is to use YouTube as a source for backgrounds, but I’ve long considered YouTube videos to be uncontrollable: not only are <iframe> elements more difficult to control and style, but the solutions that are available, such as tubular, rely on JavaScript, usually wrapped in a framework like JQuery, to “trick” the browser into positioning and playing the video, recalculating the size when the window changes. I’ve never found these solutions particularly elegant or efficient.

Recently a bit of research and experimentation has shown that it is possible to employ ordinary HTML5 and CSS to gain YouTube videos as web page backgrounds, with no JavaScript or special markup required. I’ve also included a standalone demo and a CodePen to demonstrate the technique.

The Markup

The solution is derived from Florent Verschelde’s technique for full-page video backgrounds:

<div class="video-background">
    <div class="video-foreground">
        <iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?
controls=0&showinfo=0&rel=0&autoplay=1&loop=1
&playlist=W0LHTWG-UmQ" allowfullscreen></iframe>
    </div>
</div>

The markup for the video consists of two <div> elements surrounding an <iframe>. This code goes first in your page.

it’s followed by another div that holds the actual content of your page:

<div id="vidtop-content">
…
</div>

The URL used in the iframe needs a little bit of explanation. It starts off the same as the standard embed code, but has a number of additions:

https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&start=0

In order, the parameters used are:

Parameter	Value	Result
controls	0	Hides the YouTube control bar
showinfo	0	Hides information about the video
rel	0	Don’t show related videos
autoplay	1	Start playing the video automatically
loop	1	Loop the video (requires the playlist parameter
playlist	The same embed code	Required for loop to work
start	0	The video start time, in seconds

The CSS

The styles for the markup:

.video-background {
    background: #000;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -99;
}
.video-foreground,
.video-background iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
#vidtop-content {
    top: 0;
}

The CSS moves the video to cover the page, creating the equivalent to background-size: cover for iframe content, while pointer-events: none ensures that right-clicking on the web page does not bring up the YouTube contextual menu.

There’s just two additions to make to the CSS, using the little-known aspect-ratio media condition:

@media (min-aspect-ratio: 16/9) {
    .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
    .video-foreground { width: 300%; left: -100%; }
}

Essentially, these stretch the video (shot in standard 16:9 aspect ratio) to cover the viewport as the browser changes from wide to narrow. I’ll have more to say about aspect-ratio in a future article.

YouTube Considerations

In addition to the general conditions I mentioned when self-hosted videos page backgrounds, there are a few particular considerations we should give when using YouTube for backgrounds:

• there’s no way to pause the video, at least not using this method. The YouTube API provides the possibility of doing so, which I’ll discuss in a future article.
• YouTube branding will usually appear, temporarily, at the start of the video; you should also be aware that advertising may also be included.
• most YouTube video comes with audio, which be very distracting to the user. Again, the standard iframe embed technique does not provide the option of muting audio, whereas the API does.
• you need to ensure that the video used can be seen in all countries: some YouTube videos are restricted to certain locations, meaning that it may play back for you, but not your geographical neighbour. (The easiest testing method is to use a VPN service, connecting to your page through servers in different countries).
• It could be argued that using a YouTube video this way violates Google’s terms of service, which currently state:

  “If you use the Embeddable Player on your website, you may not modify, build upon, or block any portion or functionality of the Embeddable Player, including but not limited to links back to the YouTube website.”

  However, there are several arguments that what we’re doing here does not violate these terms:

  1. YouTube itself is providing the functionality to hide its controls; we’re not “hacking” anything.
  2. Taken literally, these conditions could mean that making the video responsive would be considered a breach.

As always, the decision - and responsibility - of using code is up to you.

Original timelapse by Riccardo Rossi (ISAA), used under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Raw photos courtesy of NASA

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/PZyMrd