Embed YouTube Videos The Right Way With LazyLoad Technique

Success Trending    October 30, 2022    Blogging Tips , Tech Skills   

Embedding a YouTube video is very easy. You open the video on YouTube, click Share and then Embed. And then you include this code on your blog or website. 

Although embedding a YouTube video this way is simple, you'd be shocked to know how much a single YouTube video embed can bring down the performance of your web pages. According to labnol.org, the browser must download approximately 800 kB of data just to render the YouTube video player. Even before the visitor clicks the play button, these files are downloaded.

Lazy Loading YouTube Video Embed Technique has many benefits in terms of significantly improving website speed and performance. It is very important to know how to implement it and embed Youtube videos on your website the right way.

How to implement lazy loading on your blog or website?

There are quite a lot of plugins on the internet that does this task. You can use any plugin. But remember plugins are sometimes stuffed with unnecessary code which may take away the performance benefit.

Whether you are a website owner or blogger you would definitely require this type of embedding if you wish to increase your website or blog speed.

Here is Step by step method on how to lazyload Embed youtube player on your blog or website with a very lite pure JavaScript and CSS code.

Step 1: Find the video you want to embed and copy its URL from address bar or by clicking share then click on Copy link.

Step 2: Go to Blogging Tools Website and click the YouTube Lazy Loader card.

Step 3: You need to perform this step only once when you embed video for the first time on your website. 

Click on the CSS and JS Code

Copy the CSS and paste it in the Theme of your Content Management System (CMS) as instructed in below screenshot.

Once done click on the Next button.

Step 4: Paste the YouTube Video URL you copied in Step 1 in the first text box. Click on 'Get Embed Code' button and then on 'Copy Embed Code' button.

Step 5: Paste the code in the HTML view of your website or blog post where you want the video to appear. You may need to preview the post to see the embedded video.

How does LazyLoad Youtube Video Embed works?

The term lazyload also known as 'On-demand loading' is an optimization technique for online content.

Under this technique, a lazy loading JavaScript actually fetches and displays a thumbnail image of the Youtube video rather than the actual video itself.

 

When a user presses the play button, the thumbnail image is replaced with a conventional YouTube video player with autoplay set to 1, which allows the video to play almost instantaneously. 

The main benefit is that the extra YouTube JavaScript is only loaded if someone chooses to watch the embedded video and not if they don't.

This technique increases the website speed significantly.

DEMO

The two main advantages of lazy load YouTube video embed code

Firstly, it does not increase page size substantially. Not only does the embedded YouTube video increase the byte size of your web pages, but it also requires the browser to make additional HTTP calls in order to render the video player. 

This slows down your page's overall loading time, lowering its page speed and lowering its core vitals score. However, by using the lazy load technique you can easily avoid these problems. Lazyload YouTube video embed can save almost an MB in terms of the download of each video.

Secondly, The IFRAME tag is used in the standard YouTube embed code to fix the width and height of the video player, rendering it non-responsive.

The Lazyload YouTube Video Embed Code or the on-demand embed code is responsive, adjusting the player dimensions dynamically based on the visitor's screen size.

And the above YouTube Lazy Loader app makes it very easy to install and generate the lazy load embed code.

I would appreciate it if you link back to this page in case you find the script useful in your projects.