Home » , , , , » How to Decrease the Page Load Time of Youtube Videos on Your Web Page

How to Decrease the Page Load Time of Youtube Videos on Your Web Page

Did you know that when you embed a youtube videos with a standard iFrame tag on your web page, it gives a lot of weight on that web page? So that's why when someone visit that page, it will actually take longer for it to load and sometimes, the visitor will just leave. We don't want that to happen as lost in viewers means lost on revenue for us bloggers.

Luckily, there's a way to decrease the loading time of youtube videos and you can learn how below.

How to Decrease the Page Load Time of Youtube Videos on Your Web Page

When want to embed a youtube video on a web page, you will copy youtube embed code (like what you see below) and paste it on the web page you want it to appear.
<iframe width="560" height="315" src="https://www.youtube.com/embed/bPpFdyEioGs" frameborder="0" allowfullscreen></iframe>
 As what we've said before, this code will make the web page increase its page load and basically means that it will load slower. Now, our job is to find a way to tinker that code so that we will decrease the page loading time of the youtube video.

Google Plus uses a clever workaround to reduce the time it takes to initially load the YouTube video player and we can incorporate a similar approach approach for our websites as well.

Instead of embedding the full Youtube video player, Google+ displays just the thumbnail images of a YouTube video and a “play” icon is placed over the video so that it looks like a video player.

The on-demand embed code for YouTube is slightly different since we are now embedding the video responsively and also because the IFRAME embed code is added only then user clicks the play button.

Copy-paste the following snippet anywhere in your web page where you would like the video to appear. Remember to replace VIDEOID with the actual ID of the YouTube video. The CSS and JavaScript codes are added to the template separately. Also, there’s no need to add the height and width parameter since the video will automatically occupy the width of the parent while the height is auto-calculated.
<div class="youtube-container">
   <div class="youtube-player" data-id="VIDEOID"></div>
Here's a screenshot of how the video looks like on your web page when you apply this trick:
But before we do that, you should copy and paste the Javascript and the CSS code for this trick on your blog/website.

First, let's copy the Javascript.
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;

function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';

function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
On blogger, you can simply go to your "template", then "add html/javascript" and then copy the code above and paste it there.

What's the purpose of this javascript?

The JavaScript function will scan your pages for embedded YouTube videos. If found, it will add the corresponding thumbnail image and also add the onclick event listener that will do the actual magic – replace the image with the actual YouTube video in autoplay mode.

Next is the CSS code.
.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://i.imgur.com/TxzC70f.png") no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
Open the CSS file of your website and paste the following snippet. If you don’t have a separate CSS file, you can also place it before the closing head tag of your web template.

If you've done it correctly, then this method will reduce the size of your webpages by 300-400 KB while making your site mobile friendly.

You can check out the sample on the link right after the break.


Credits: Special thanks to Amit Agarwal for this very helpful tip.