How-to: Youtube (Live!) CSS / JavaScript video background

Following the huge success of our other post about how to apply a CSS Video Background, here’s the follow-up post with the updated code to do the equivalent effect, but this time with a Live Video from YouTube.

Don’t forget the tips we gave on the other post regarding video backgrounds that are still available for this one.

DEMO: Codepen.

Before starting, please take in consideration:

  • Use a video background is it’s really going to improve your site’s look and feel in a positive way. It’s very easy to get lost in fancy stuff and make your site slower and harder to navigate;
  • Don’t use sound. Really. Just don’t. It’s makes your video heavier and adds no value. The example code adds “mute” by default, but you also have the option to enable/disable sound by clicking the icon.

The HTML Code

Nothing fancy here, but a few notes:

  • We include jQuery just for the sound manipulation, if you don’t use it, you can remove it;
  • YouTube API is included here but called in the JavaScript file;
  • The code uses CSS Bootstrap 3 that is not included in the header because the code is copied from Codepen. Scroll down to check the direct link.

<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Bootstrap Youtube Video Background</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
 <script async src="https://www.youtube.com/iframe_api"></script>
 </head>
 <body>
 <div class="video-background">
 <div id="video-foreground" class="mute"></div>
 </div>
 <div class="container">
 <div class="col-md-12 main-content">
 <div class="text-center">
 <h1>Youtube Live Background!</h1>
 <p>This is a fully responsive, auto-play, auto-loop YouTube Video Background. You can use any video, just edit the JavaScript file. Try the sound icon below to enable/disable sound. The video running is from channel Space Videos and you can check the original <a href="https://www.youtube.com/watch?v=ddFvjfvPnqk">here</a>.</p>
 <span class="fa-stack fa-lg sound">
 <i class="fa fa-circle-o fa-stack-2x"></i>
 <i class="fa fa-volume-off fa-stack-1x volume-icon"></i>
 </span>
 <a href="https://www.facebook.com/viewlike.us" target="_blank">
 <span class="fa-stack fa-lg">
 <i class="fa fa-circle-o fa-stack-2x"></i>
 <i class="fa fa-facebook fa-stack-1x"></i>
 </span>
 </a>
 <a href="https://www.viewlike.us" target="_blank">
 <span class="fa-stack fa-lg">
 <i class="fa fa-circle-o fa-stack-2x"></i>
 <i class="fa fa-link fa-stack-1x"></i>
 </span> 
 </a>
 </div>
 </div>
 </div>
 </body>
</html>

The CSS Code

Again, nothing special but a few notes:

  • imported Roboto to make type look better, you can remove it if you don’t want to use it;
  • All the section below Content can be removed
@import url('https://fonts.googleapis.com/css?family=Roboto');

/*Background*/
* { 
 box-sizing: border-box; 
}
.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;
}

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

/* Content
 * You can remove below when adapting to your project
 */
h1, p, i {
 color: white;
}
p {
 font-family: 'Roboto', sans-serif;
 font-size: 16px;
}
h1 {
 font-size: 68px;
 font-family: 'Roboto', sans-serif;
 font-weight: 600;
 text-transform: uppercase;
}
.main-content {
 margin-top: 15%;
}

The JavaScript

Coolest part of the code and works quite well!

  • onYouTubeIframeAPIReady() builds the video in the video-foreground HTML ID Tag
  • onReady, mutes the video just after loading.
  • Sound Control section takes care of the enable/disable sound with the icon
var player;

function onYouTubeIframeAPIReady() {
     player = new YT.Player('video-foreground', {
     videoId: 'ddFvjfvPnqk', // YouTube Video ID
     playerVars: {
     autoplay: 1, // Auto-play the video on load
     controls: 0, // Show pause/play buttons in player
     showinfo: 0, // Hide the video title
     modestbranding: 1, // Hide the Youtube Logo
     loop: 1, // Run the video in a loop
     fs: 0, // Hide the full screen button
     cc_load_policy: 0, // Hide closed captions
     iv_load_policy: 3, // Hide the Video Annotations
     autohide: 0, // Hide video controls when playing
     playlist: 'ddFvjfvPnqk'
 },
 events: {
     onReady: function(e) {
     e.target.mute();
     }
 }
 });
}
/* Sound Control
 * You can remove below if you don't want to show the icon. Video will be muted by default.
 */
$(document).ready(function(e) {
 $('.sound').on('click', function() {
     $('#video-foreground').toggleClass('mute');
     $('.volume-icon').toggleClass('fa-volume-up', 'fa-volume-off');
 if ($('#video-foreground').hasClass('mute')) {
     player.mute();
 } else {
     player.unMute();
 }
 });
});

Code available on Codepen.