How To Add jQuery Lazy Loading YouTube Videos in Blogger

Socialize It →

Tweet

5

Advertisements

YouTube is one of the most dominating online Video broadcasting website which has some flexible options to be embedded in a webpage. Furthermore, there are no two opinions that YouTube enriches a blog with awesomeness. However, what would happen if we embed 20 different kinds of Videos into one Webpage? It will surely reduce the page speed and would increase the number of HTTP requests. Since, every video is hosted in an iframe. Therefore, it takes a while to load. For one video, it would not take too long, but for 20 it would surely consume a hell lot of disk space plus it will also decrease the page speed. For the reason, MBL Developers have developed a robust jQuery plugin for Lazy loading YouTube videos.

Introduction: How To Accelerate Blog Speed & Load Time? - Series

Tutorial #1: How To Analyze Your Site Speed With Online Tools?

Tutorial #2: How To Combine Images into Spirits To Reduce Load Time?

Tutorial #3: How To Add jQuery Lazy Loading YouTube Videos in Blogger?

Tutorial #4: How To Avoid Useless Widgets That Increases Blog Load Time?

What is Lazy Loading YouTube Video? 

When we have lots of videos embedded into a single webpage it quite obvious that it would increase the load time. However, what would happen if we have a web page containing a YouTube Video which will not be played until a person clicks on it. This is a straightforward tip that you may have seen on Facebook Videos. In reality, the video is hidden behind an image and only appears whenever a visitor clicks on it. We have added a lazy Loading YouTube Video below so feel free to click on the below image and see the magic.

Lazy Loading YouTube Videos (DEMO) 

How to Add Lazy Loading YouTube Video in Blogger?

Nowadays The Embed code of YouTube looks a similar to the following. It is just an artless iframe that helps in embedding. 

<iframe width="420" height="315" src="https://www.youtube.com/watch?v=aoJ29q_ClGk?rel=0" frameborder="0" allowfullscreen></iframe>

The first thing we need to do is to add CSS coding to blogger template. Go to Blogger >> Template >> Edit HTML >> Proceed. Now search for Skin tag and just above it paste the following chunk of coding. 

/********************************

/////////////////////////////////////////////////////////

//                                                     //

//  //  Designer: Syed Faizan Ali //

//  All rights are Strictly Reserved  //

//                                                     //

/////////////////////////////////////////////////////////

********************************/

a.mbl-youtube-lazy-loading {

  vertical-align:top;

  background:#555;

  width:560px; height:315px;

  background-size:cover;

  text-decoration:none;

  color:#DDD;

  text-align:left;

  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

  display:inline-block;

}

a.mbl-youtube-lazy-loading:hover {

  text-decoration:none;

  color:#FFF;

}

.mbl-youtube-lazy-loading-div {

  border:2px solid #000;

  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcL11pp5527psakfw_JlagZyum_hjkuy94aFVo1ThSJEyrIb6j7fMeWggSElTVHwzYTWAHPYC6jt12lzq8DNFfBY6KsmuJUzPRZsVudRcMhyphenhyphenMPeK2oCpSaJp3HfC-pqAit9aOj5ijvn_8/s800/youtube-play-button.png) center center no-repeat;

  position:absolute;

}

.mbl-youtube-lazy-loading-div:hover {

  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisurtva0YTF4r9L8GzhdKMT0y5GaUoFPAwuvA5064FczcBLog-RV3TwKoL1MlwC7k0RAyXJLY7flfoDnLhFMc1R6rE3Y2fZfWBpIKGWlP1ur0f8LNuDoDgnddIJumHyfJKyoFc6H9cf7E/s800/youtube-play-button-hover.png) center center no-repeat;

}

.mbl-youtube-lazy-loading-info {

  font-size: 110%;

  font-family:lora;

  padding: 2px 6px;

  background: rgb(0, 0, 0);

  background: rgba(0, 0, 0, 0.5);

}

#mycontent { 

  text-align:center;

  position:relative;

}

After pasting the CSS coding move ahead and search for </head> tag and just above it paste the following JavaScript coding. Don’t worry it will not disturb the load time of your website. Once everything is done Save the template.  

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

Now let us speed up our Page Speed. Once the Lazy loading script is installed its time to utilize it. Go to Blogger >> Add New Post >> Select the Edit HTML Tab and just paste the following coding. Note: This technique also works on WordPress and other platforms too. 

<div style="text-align:center;"><a class="mbl-youtube-lazy-loading" href="https://www.youtube.com/watch?v=aoJ29q_ClGk" style="width: 540px;height:315px;" title="Click to play!"><b>An Introduction To Blogger Post Editor</b></a></div><div id="mycontent">Powered By <a href="http://www.mybloggerlab.com">http://www.mybloggerlab.com</a></div>

<script src='https://mybloggerlab.googlecode.com/files/lazyYT.js' type='text/javascript'></script>

From the Above Coding replace the following according to your needs.

•  https://www.youtube.com/watch?v=aoJ29q_ClGk with your YouTube Video URL.
•  540px to increase the width.
•  315px to increase the height.

All Done: Now after customizing the above coding, hit the Publish button. That is all. This technique is bit new so if anyone faces any bug then, do not hesitate to leave your comment below.

From The Editor's Desk:

It almost took more than 2 months to publish another Article of this series. The reason behind that was the hard work our Team has done to prepare this JavaScript. However, soon we will finish this serious on a high. What are your thoughts about this Lazy Loading jQuery Script? Feel free to share your views. Take care till then, Peace, Blessings and Happy loading. 

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).