How To Hide That Ugly YouTube Preloader

Here’s a quick thing that may save you some time when you’re working on a video in a background thingy and using YouTube as your media source.

If you’ve ever done something like that, you know that if you just drop a YouTube embedded player into your source code it will not work very well for background purposes. That’s because YT provides it for people who want to use it inside of site content and not necessarily in the background.

So here’s what you get straight from the site:

<iframe width="560" height="315" src="https://www.youtube.com/embed/zFwL301vd4A" frameborder="0" allowfullscreen></iframe>

Now, in order to make it more suitable for the background use, we want to modify it slightly to remove controls, mute the sound, autoplay and loop it. Here’s how the “updated” embed code looks:

<iframe width="560" height="315" src="https://www.youtube.com/embed/zFwL301vd4A?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=zFwL301vd4A&mute=1" frameborder="0" allowfullscreen data-autoplay data-keepplaying></iframe>

Most of the attributes are self-explanatory, but one may wonder why we need the “playlist” one. It’s actually super important for looping the video. Without it, you won’t be able to loop the player.

Once you’ve fine tuned the iframe, just drop it into your website code, style the container to cover the designated area, be it whole viewport or just certain DIV element, and you’re done.

So, that’s the default state of the things – load the video in the background, suffer the loading screen and hope that the playback begins before the user gets annoyed and goes to look at some better-written websites.

What if I told you that there’s a better way? Well, there is, and it doesn’t only exist, it’s also not even that complicated to implement. Basically, what we need is an image that will be covering the video until it actually starts playing. So, what we need is a trigger that “knows” when the video finished buffering and sadly, that’s not available on iframe embeds. In order to solve this issue we will use YouTube Player API as documented in the Google Developers portal:

https://developers.google.com/youtube/iframe_api_reference

We will enhance the example there so it actually contains an overlay image plus an element that will contain the player. Here’s some example HTML that serve this purpose:

<section class="full-size-page">
<div id="video-overlay" style="background-image:url(images/overlay.jpg);"></div>
<div class="background-video">
   <div class="foreground-video">
       <div id="player"></div>
   </div>
</div>
</section>

In the example above, we have 2 elements you should pay attention to: #video-overlay and #player. In your styles, make sure that when the page loads the #video-overlay div is visible and set to cover the .background-video element.

Finally, instead of adding an iframe into the #player element use this snippet of JavaScript:

<script type="text/javascript">
   var player;
   function onYouTubeIframeAPIReady() {
       player = new YT.Player('player', {
           videoId: 'zFwL301vd4A',
           playerVars: {
               mute: 1,
               autoplay: 1,
               loop: 1,
               controls: 0,
               showinfo: 0,
               autohide: 0,
               enablejsapi: 1,
               modestbranding: 1,
               playlist: 'zFwL301vd4A',
               vq: 'hd1080'
           },
           allowfullscreen: 1,
           events: {
               'onStateChange': onPlayerStateChange
           }
       });
   }
   function onPlayerStateChange(el) {
       if(el.data === 1) {
           jQuery('#video-overlay').hide();
       }
   }
</script>

And you’re all set! It’s that easy.

Now, a few things that were not clear to me immediately:

1. You don’t need to put this JS code into a window.onload block. It’s cleverly made and, as you see in the snippet, you can just add a function (onYouTubeIframeAPIReady) that is automatically called by the API library when it’s ready to roll.
2. In the YT.Player constructor (new YT.Player(‘player’), the ‘player’ string is the selector, and the lib assumed it’s an ID of the element. No need to enter it as “#player”
3. We didn’t find an easy way to mute the video. In most cases, it’s easier to just upload a soundless version of the video and save yourself a further hassle.

That’s it. There really isn’t that much to this solution but it’s nifty and makes sites look so much nicer. When there’s no loader but nicely picked illustration if really helps keep the user entertained for the brief moment until the video starts playing. Also, it’s good because if it won’t play the picture will just keep displaying and no one notices that something went wrong 🙂

You may want to check the repository that we created with examples of both approaches. Here’s the link: https://github.com/nopio/background-video-tutorial

Inside you’ll find 2 HTML files:

• old_way.html – regular iframe implementation with ugly loader
• new_way.html – the better way of doing things.