Embed Responsive Youtube Videos on Blogger Blogs

As a blogger, more than explaining with your writings, it would be easier for the reader if you explain the post with a video. But when you embed a video, especially a YouTube video on your blogger blog, you could see that it consumes 300 KB to 400 KB of data for downloading the player elements. If you have any blog posts which had a YouTube video embedded on the post, check out the loading speed of that blog post.
It is found that, a single YouTube video, embedded on a webpage, makes more than 10 HTTP requests and downloads around 400+ KB of data even before the user has hit the play button. That increases the page load time of your blog.

It is very crucial that your blog page loading time is a directly affecting on page SEO factor, which you need to fix for dominating the Google SERP. Moreover, the default YouTube player which you embed on your blog posts are not responsive, which ultimately results in a poor user experience for viewers who visit your blog. In this blog post, I show you how to responsively load YouTube videos in your blogger blog.

How to Embed YouTube Videos Responsively on Blogger

Instead of embedding the full YouTube video player, we are going to display just the thumbnail images of the YouTube video and a “play” icon is placed over the video so that it looks like a video player. If you want to know how it works, just see this post: How to Download YouTube Videos on my blog which is designed using the same trick which I am mentioning below.
When the user hits the play button, the video thumbnail is replaced with the standard YouTube video player with auto-play set to 1 so it plays the video instantly.

Step 1: Add the below JavaScript code at the footer section of your blogger blog

<script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = ytThumb(v[n].dataset.id);
        p.onclick = ytIframe;
        v[n].appendChild(p);
    }
})();
 
function ytThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
 
function ytIframe() {
    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);
}
</script>

The JavaScript function will check whether any videos are available on your blog post and if found, it just replaces it with the thumbnail image of that corresponding YouTube video. When user hits the play button, JavaScript does the magic by embedding the actual YouTube player.

Step 2: Add the below CSS code before ]]></b:skin> on your Blogger Template

.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; }

Step 3: Embedding Responsive YouTube videos

Paste the following code 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. Also, there’s no need to add the height and width parameter since the video will automatically occupy the width of the device while the height is auto-calculated.

<div class="youtube-container">
   <div class="youtube-player" data-id="VIDEOID"></div>
</div>

Conclusion

This technique will decrease your webpage size by 350 KB to 400 KB while making your website responsive.
Please comment below if you have any issues regarding implementing the above codes on your blogger blog.