How To Add jQuery Lazy Loading YouTube Videos in Blogger

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.

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.

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(http://lh4.googleusercontent.com/-QCeB6REIFlE/TuGUlY3N46I/AAAAAAAAAaI/9-urEUtpKcI/s800/youtube-play-button.png) center center no-repeat;
  position:absolute;
}

.mbl-youtube-lazy-loading-div:hover {
  background: url(http://lh5.googleusercontent.com/-oBFjswrosz4/TuHqainRc3I/AAAAAAAAAbE/t3rMQuSJdLA/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

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

Comment With:
OR
Choose Wisely!

5 comments

January 23, 2013 at 6:23 PM

Nice post bro ! Thumbs up !!

January 24, 2013 at 12:47 AM

very nice... But does it still take long..? Coz i thing the video's pic is only loaded first.

Editorial Team MOD
January 24, 2013 at 12:59 AM

You can try, It takes 80% less time than original ;). Worth using.

January 24, 2013 at 2:03 AM

great post; few people may be knowing of this tip

January 24, 2013 at 8:31 AM

brother it is another awesome tips i was waiting for . But brother i have a question please tell me that how to compress all css code in one file and how to add that file in blogger blog.

Thank you,
Regards : Haseeb malik
Blog: http://haseebnet.blogspot.com

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.