Skip to HeaderSkip to PostSkip to Footer

How to Lazy Load YouTube Videos on Blog

How to Lazy Load YouTube Videos on Blog - For those of you who like to embed YouTube videos on blogs, you must be aware that YouTube videos will be automatically loaded every time the page is opened. And, of course it affects the speed performance of the blog. For simplicity, please look at the image below:

You can see that with the usual embed method, the YouTube video that you embed will immediately load all the default scripts from YouTube which ultimately makes loading our blog even more difficult.

The solution to this problem, you can apply lazy load to the YouTube videos that you embed.

How to do? Let's discuss together.

1. What is YouTube Video Lazy Load?

Lazy load is a script that functions to delay loading until there is a trigger that causes loading to occur. (GeeksforGeeks.org)

In the context of this YouTube video, lazy load will prevent YouTube videos from loading the default embed scripts from YouTube and only loading them if your blog users/visitors press the play button on the video.

Is this against YouTube?

It shouldn't be, because we don't do anything illegal at all, such as completely changing the default YouTube script. In fact, the default script is almost unchanged at all.

We will still use IFrame from YouTube  to do it. We will only add a little touch of CSS in it so that the result is that the Iframe will only load the thumbnail if it is not clicked by the user.

2. How to Install Lazy Load YouTube Videos

To lazy load YouTube videos you only need to use the following script:

<iframe width="100%" height="480" src="https://www.youtube.com/embed/GMlGHCroDpA" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/GMlGHCroDpA?autoplay=1><img src=https://img.youtube.com/vi/GMlGHCroDpA/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition' title='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition" ></iframe>

After that, please replace the code marked in yellow with your video's unique code. How to get a unique code, how do you know the unique code? You can find it in the Video URL.

That is an example of a unique code from a video. Usually the unique code is behind the parameter (v=).

Next, please change the code marked with salted egg blue with the title of the video you want to embed. For this part, it's actually for the SEO factor, even if it's not replaced, it's actually not a problem.

All right. Now all you have to do is install it on your blog/website.

Example Results

For what results? You can see for yourself an example below.

And you can check the results on Google Pagespeed Insights here: Google Pagespeed Insights for YouTube LazyLoad. Or to make it even simpler, you can look at the image below.

Can you see the difference between before and after?

Well, maybe that's all I can explain about how to lazy load YouTube videos on the blog. If something is not clear, you can ask in the comments. Hopefully useful and see you in the next article.

Comments

Post a Comment

Please give relevant comments. Dont put irrelevant link on the comment section or I will delete the comment.