[NEW] Lazy Load Embedded Youtube Video

Lazy Load Embedded Youtube Video

Introduction To Lazy Load Youtube

In This Article, We Are Gonna Learn How We Can Lazy Load Embedd Youtube Video For A Great Page Performance. Most Of The Bloggers Writes Article On Demonstrations Or Tutorials Where For Better Understanding They Embed A Youtube Video [Least 1 Or 2].

Now Here The Problem Starts, I Already Guess your Website/Blog Has A Lot Of CSS And Javascript. Some Of You Might Have Also Used Bootstrap Framework. Embedded Youtube Video Will Loads Its Javascript And CSS Which Decreases Page Speed And Performance.

What Is Lazy Load Embedded Youtube Video?

It Means That The Embedded Youtube Videos Will Be Only Loaded After The Visitor Clicks On The Video. So That The Youtube Javascript And CSS Will Be Loaded Dynamically At That Time Only.

Imagine I Am Having Two Youtube Videos Embedded On My Page Then Visitors Visits My Page Who Doesn't Want To See The Youtube Video But, The Videos Gets Processed During The Time Of Page Loading. To Prevent This We Will Lazily Load The Youtube Video. If The Visitor Wants To See Only 1 Of 2 Videos Then That Video Will Be Loaded After Clicking On The Thumbnail.

Effects Of Lazily Loading Youtube Video?

As I Said Earlier, It Will Increase Speed Of Your Blog Hosted On Blogger Or Any Other Platform. Previously, My Blog At TheNaikPost Was Facing Speed Issues One Of Them Was Youtube Script Expiration Which Got Solved After Lazily Loading Youtube Video.

I Also Calculated The Speed Of Both Demo Blogs One With Lazily Loaded Youtube And Lazily Loaded Images And Another With No Lazy Load. The Lazy Loaded Blog Showed A Greater Speed And Performance.

In Short, If You Are Facing Speed Issues On Gtmetrix Or Page Insight You Can Consider Above Method Significant For Solving Your Issues.

How To Lazy Load Embedded Youtube Video?

A Small And Tiny Code Of CSS And Javascript Can Do This Work For You. Most Of The Javascript Lazy Loads The Video While Most Of The CSS Makes Videos Responsive.

Make Sure Yours Blog Has Jquery Installed. Just Search For jquery In Your Blogger Template Just Press CTRL + F And Provide Input As jquery. If It Already Exists Its Well And Fine, If Not Paste The Below Jquery In Your Blogger Template Above </body>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"/>

Now For Making Youtube Video Responsive, Add The Below CSS Above </head>

<style type='text/css'>
/*<![CDATA[*/
.YoutubeLazy{background-color:#000;margin-bottom:30px;position:relative;padding-top:56.25%;overflow:hidden;cursor:pointer}.YoutubeLazy img{width:100%;top:-16.84%;left:0;opacity:.7}.YoutubeLazy .YoutubeButton{width:68px;height:48px;background-color:#333;opacity:.8;box-shadow:0 0 30px rgba(0,0,0,0.6);z-index:1;border-radius:12px}.YoutubeLazy .YoutubeButton:before{content:"";border-style:solid;border-width:10px 0 10px 20px;border-color:transparent transparent transparent #fff}.YoutubeLazy img,.YoutubeLazy .YoutubeButton{cursor:pointer}.YoutubeLazy img,.YoutubeLazy iframe,.YoutubeLazy .YoutubeButton,.YoutubeLazy .YoutubeButton:before{position:absolute}.YoutubeLazy .YoutubeButton,.YoutubeLazy .YoutubeButton:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.YoutubeLazy iframe{height:100%;width:100%;top:0;left:0}
/*]]>*/
</style>

Now At Last, Copy Paste The Below Javascript Above </body>

<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('3 2(a){$(".2").D(3(){m b="9://l.5.7/f/"+$(1).8("4")+"/"+a+".d";$(1).e($(p g()).h("6",b).i());$(1).j(3(){$(1).k("");$("<n>",{o:"2",6:"9://r.5.7/4/"+$(1).8("4"),t:0,u:"v; w; x-y; z; c-A-c",B:""}).C($(1))})})}!3(){2("s")}(q);',40,40,'|this|YoutubeLazy|function|embed|youtube|src|com|data|https|||picture|jpg|append|vi|Image|attr|fadeIn|click|html|img|var|iframe|id|new|jQuery|www|sddefault|frameborder|allow|accelerometer|autoplay|encrypted|media|gyroscope|in|allowfullscreen|appendTo|each'.split('|'),0,{}))
//]]>
</script>

How To Embed Youtube Video Using Shortcode?

If You Have Implemented Above CSS And Javascript In Your Blogger Template Then, You Might Have To Use The Shortcode To Embed The Video To Make It Responsive And Lazily Load It.

<div class="YoutubeLazy" data-embed="bhwyLZ4yqZw">
  <span class="YoutubeButton"></span>
</div>

In The Above Code, You Have To Replace data-embed With Yours Youtube Video Code.

https://youtu.be/bhwyLZ4yqZw

In The Above Youtube Video Link, We Have bhwyLZ4yqZw As Embed Code.

Thats All!!!, I Hope This Will Surely Improve Your Page Performance

Working Of Lazy Loading Youtube Videos!

Normal Embedded Youtube Video

Lazy Loaded Youtube Video

Demonstration Video