TRENDING »
Loading...

Embed YouTube Videos The Right Way With LazyLoad Technique

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. 

Embed YouTube Embed Code

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.

LazyLoading 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.

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.

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.

Get Lazyload Youtube Video Embed Code



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 do.

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.

Taking inspiration from the original script on labnol.org, I have tweaked the code to improve its performance and also to give it a better user experience.

And the app above 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. 

Share with your friends

Add your opinion
Notification
You can subscribe to our blog or follow us on social media to get notified about the new posts.
Done
Title
Text Content
Close
Cookies used on the website!
We and our partners use cookies to personalize content and ads, to provide social media features and to analyze our traffic.
You consent to use of these cookies if you continue to use this website.
Learn more »