If you are looking for how to add a Lazy load embedded YouTube videos On Blogger website then this post is just for you.
I am Monish. I have been involved with coding for a long time. I will give you proper advice from long experience so let's start.
Here, I will share how you can postpone the stacking of Youtube inserted recordings on your site to help the stacking speed. You don't have to add any Javascript code to your site. You simply have to change the HTML code a tad for iframes.
We only used then HTML, CSS and JS. Are you upset about your website speed? do not worry it doesn't affect your website speed.
Also do not worry about it this Accordion Section also has dark mode CSS that you just want to change the dark mode class that we gave with your theme dark mode class, you can fluently change it by following this tutorial precisely.
What is wrong with the default Youtube iframe?
The default YouTube iframe that we implanted in our site dials back the stacking speed by stacking a ton of assets in the front end.
An installed iframe of YouTube recordings can take around 500-700 KB contributing around 50-60 percent of the absolute page size. Thus, how hard you upgrade your pictures, CSS, and javascript stacking, goes about as a bottleneck in the speed execution.
It also blocks the main thread and when you check the page URL in the page speed insight you will see an error like this.
It also triggers errors in the page speed insight report as mention below.
- Diminish the effect of outsider code.
- Some outsider assets can be languid stacked with a veneer.
- Doesn't utilize inactive audience members to improve looking over execution.
- Diminish JavaScript execution time Eliminate unused JavaScript.
It also increases the total number of network resources which causes the slow down of loading speed in Blogger.
How Lazy loading of Youtube video works?
In the event that you implant a youtube video in the conventional strategy, it will stack the expected assets toward the start of the page load regardless of whether the client plays the video.
Rather than stacking the video at the outset we can defer a heap of Youtube iframes by executing the lazyload. In this way, when a client looks to the video, the video will begin stacking.
It will save the server data transfer capacity and burden the site page quicker. It additionally won't obstruct the primary string assignment and burden just when it is required.
In any case, rather than simply applying the Lazyload, we can add a little placeholder which is essentially a picture with a play button and it will open the implanted video when a client taps on it.
Along these lines, the program will stack just the picture and burden the video just when a client taps on the play button. Presently you have figured out how it functions. We should perceive how you can execute apathetic stacking of iframes in your Blogger site.
So without wasting important time let's check How to Lazy load embedded YouTube videos in Blogger?
You can see the demo here:-
How to Lazy load embedded YouTube videos in Blogger?
Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it.
/* yt border & bg */.ytShdw{border-radius:10px;padding:10px;box-shadow:rgba(0,0,0,.24) 0 3px 8px;background-color:#fff}.ytShdw iframe{border-radius:10px;background-color:#ccf4fc}
/* yt iframe */.youtube-player{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;background:#000;margin:0;border:1px solid gray;border-radius:10px}.youtube-player iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:0 0}.youtube-player img{object-fit:cover;display:block;left:0;bottom:0;margin:auto;max-width:100%;width:100%;position:absolute;right:0;top:0;border:none;height:auto;cursor:pointer;-webkit-transition:.4s all;-moz-transition:.4s all;transition:.4s all}.youtube-player img:hover{-webkit-filter:brightness(75%);-moz-filter:brightness(75%);filter:brightness(75%)}.youtube-player .play{height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;position:absolute;background:url(https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg) no-repeat;cursor:pointer}
/* yt darkmode */.drK .ytShdw{background-color:#000}.drK .ytShdw{box-shadow:rgba(255,255,255,.24) 0 3px 8px}.drK .ytShdw iframe{border:1px solid #41b375}
Don't forget to change .drK with your website theme dark mode class, if your theme did not have a dark mode feature then keep default!
Step 6: Find the tag </body> or some template will be </body> and add the JavaScript below and above it:
<script type="text/javascript">function labnolIframe(e){var t=document.createElement("iframe");t.setAttribute("src","https://www.youtube.com/embed/"+e.dataset.id+"?autoplay=1&rel=0"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","1"),t.setAttribute("allow","accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),e.parentNode.replaceChild(t,e)}function initYouTubeVideos(){for(var e=document.getElementsByClassName("youtube-player"),t=0;t<e.length;t++){var a=e[t].dataset.id,r=document.createElement("div");r.setAttribute("data-id",a);var i=document.createElement("img");i.src="https://i.ytimg.com/vi_webp/ID/hqdefault.webp".replace("ID",a),r.appendChild(i);var n=document.createElement("div");n.setAttribute("class","play"),r.appendChild(n),r.onclick=function(){labnolIframe(this)},e[t].appendChild(r)}}document.addEventListener("DOMContentLoaded",initYouTubeVideos)</script>
Step 7: Save the html changes by clicking on this icon
Step 8: Then go to the page/post or place which you want to add Lazy load embedded YouTube videos
Step 9: Then if you are doing this in page/post then don't forget to change Compose view to the HTML view
Step 10: Now paste the following HTML code to that place
<div class="ytShdw"> <div class="youtube-player" data-id="0GdYvVsnwDU"></div> </div>
You can change highlighted texts as you want in the code box!
Step 11: Then Save or Publish.
Important Information:
000000000000Here you have to give the ID of the YouTube video- You may be wondering what YouTube video ID is?
Let me explain it to you with an example For example, this is a link to a YouTube video :-https://youtu.be/0GdYvVsnwDU
The0GdYvVsnwDUhighlighted in the link is the youtube video id of this text. Hope you understand.
Terms of Use
To appreciate our workshop, consider keeping the credits in canons.
We do not allow to rewrite this post in any manner. Do not copy this post, canons or any part from this composition without authorization, it's rigorously prohibited.However, Legal conduct will be taken, If you do so.
Conclusion
Hope this How to Lazy load embedded YouTube videos in Blogger? article will be useful to you, If you have any dubieties or facing any issues while installing it also you can ask me in the comment, Do share with your musketeers, Thanks for visiting, Have a nice day!