Lazyload Youtube Embed Codes For Blogger
Dhanjee Rider
If you run a blog or website, you might have noticed that embedding YouTube videos can slow down your website’s load time. This is because the video player and all the associated scripts have to load before the page can display fully. This can be frustrating for your readers, who might leave your site before the video even loads. To solve this problem, you can implement a technique called "lazy loading," which allows your videos to load only when they're needed. In this post, we'll discuss how to implement lazy loading for YouTube embeds in Blogger.
What is lazy loading?
Lazy loading is a technique that delays the loading of certain elements on a webpage until they are needed. This can include images, videos, or other types of media. By using lazy loading, you can significantly improve your website’s load time and reduce your bounce rate.
When it comes to YouTube embeds, lazy loading means that the video player and all its associated scripts will only load when a user clicks on the video to play it. This means that the video won’t slow down the rest of your page.
Why use lazy loading for YouTube embeds?
- There are several benefits to using lazy loading for YouTube embeds:
- Faster load times: Lazy loading allows your page to load more quickly, which can improve user experience and reduce bounce rates.
- Better performance: By reducing the number of scripts and assets that need to be loaded, lazy loading can improve your website’s overall performance.
- Improved SEO: Faster load times can also have a positive impact on your search engine rankings, as Google takes page speed into account when ranking pages.
demo of lazyload YouTube
How to implement lazy loading for YouTube embeds in Blogger
Implementing lazy loading for YouTube embeds in Blogger is relatively straightforward. Here's how to do it:
Step 1: Install the LazyLoad Script paste this ๐code in your theme above </body>
<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>
.youtube-player{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;background:#000;margin:0;border:1px solid blue;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}
and now your lazyload youtube setup is done ✅
how to use now ?
you need to replace your old YouTube bed with this lazyload
you can add a 1 line code and by pasting
<div class="youtube-player" data-id="0GdYvVsnwDU"></div>
change video Id with your YouTube embed id eg 0GdYvVsnwDU is a embed id you can also find by embedding video normaly and then you need to remove all iframe but before this copy your vidoe id in clipboard then paste on my lazyloD YouTube code ๐
Benifits of this lazy load YouTube embed
Lazy loading is a technique used to improve the performance of websites by loading only the necessary content, instead of loading everything all at once. When it comes to YouTube embeds, lazy loading can provide several benefits, including:- Faster page loading times: By only loading the YouTube embed when a user scrolls down to it, the initial page load time is reduced, resulting in faster page loading times.
- Reduced bandwidth usage: Embedding a YouTube video can consume a significant amount of bandwidth, which can slow down the loading time of your webpage. By lazy loading the video, you can reduce the amount of bandwidth used, resulting in a faster loading time and better user experience.
- Improved user experience: Users are more likely to stay on your page if it loads quickly and smoothly. By using lazy loading for YouTube embeds, you can provide a better user experience and keep visitors engaged with your content.
- Improved website performance: Lazy loading YouTube embeds can help improve the overall performance of your website, reducing the load on your server and minimizing the resources required to load the page.
In summary, lazy loading YouTube embeds can improve website performance, reduce bandwidth usage, and provide a better user experience, ultimately leading to more engagement and better results for your website
Last word
In this post we will provided information about Lazyload Youtube Embed Codes For Blogger, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.
