Hello Guys! Is your blog made on Blogger? If yes then this post is going to be very important for you If you embed Youtube Videos in your Blogger Site. Because I am going to tell you in this post that How to Lazy Load Embedded Youtube Videos in Blogger Site? So that Youtube Videos are fast loaded in your Blog's Page or Post and your Blog's Loading Speed Increase too.
So friends, let's know how to Lazy Load Embedded Youtube Videos in Blogger Site?
Let's see a Demo
How to Lazy Load Embedded YouTube Videos in Blogger?
What are the drawbacks of embedding Default Youtube Videos? Friends, when many bloggers write an Article/Post and they have to embed any Youtube Videos in that Article/Post, then they add the Default option which is given in Blogger from there and their Blog Post's Loading Speed Down. This is because the code of Youtube Embedded Videos is 'iframe' code which takes more time to load Youtube Videos on your Post. Click on the link given below to check the Loading Speed of your website -If we talk about its size, then it can take up to 500KB - 700KB, due to which the loading speed of your website goes down by 30% to 40%. The reason for this is that this code is not able to optimize your Youtube videos according to your website.
If you have checked your website on PageSpeed Insights and the error is coming as shown in the image below, then you must follow the trick mentioned in this post, it will definitely increase the loading speed of your site.
.webp)
How will Lazy Load Embedded Youtube Videos Code work? Lazy Load Embedded Youtube Videos Code will optimize Embedded Youtube Videos in your post according to the page or post of your website and it will load Embedded Youtube Videos in your post only when your visitor clicks on that video. How To Add Lazy Load Embedded Youtube Videos Code In Blogger Site? If you want to add Lazy Load Embedded Youtube Videos Code to your Blogger Website, then you have to follow these steps.
How to Lazy load embedded YouTube videos in Blogger?
Warning!
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 open Blogger Dashboard .
Step 2: Click on Theme Menu.
Step 3: Click on Edit HTML Button.
Step 4: 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 5: 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 6: Then go to the page/post or place which you want to add Lazy load embedded YouTube videos.
Step 7: Then If you are doing this in page/post then don't forget to change Compose view to the HTML view
Step 8: Now paste the following HTML code to that place
<div class="ytShdw">
<div class="youtube-player" data-id="--QAQYEXfwo"></div>
</div>You can change highlighted texts as you want in the code box!
Step 9: Then Save or Publish.
Important Information:
00000000000000 Here 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/--QAQYEXfwo
The --QAQYEXfwo highlighted in the link is the youtube video id of this text. Hope you understand.
CONCLUSION
In this article, I shared with you How to Lazy load embedded YouTube videos in Blogger? I hope you have liked It. Please do share it with your friends and follow our blog for more.
Join our Telegram Channel to get the lastest posts updates daily.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.
©Copyright: FreemiumTech™