dyYouTubeLazyLoadJS is a small plugin that will lazy load YouTube embed videos on your blogs and websites.
Embedding YouTube videos is very common. All we have to do is click the share button on YouTube video page, copy the embed HTML code and paste it on our blog or website page and we are done.
This method works totally fine but increases the time to load the page.
Page load time in simple terms is the amount of time it takes for your page to load.
If we have multiple embedded videos on our page then the page load time will go up which means more visitors will leave the website.
To reduce the page load time we have to lazy load the YouTube video and that is exactly what this plugin is designed for.
Become a Patron
If you find this project useful then feel free to back it. I'm on Patreon
Buy me a cup of tea Donate via PayPal
It's free and released under MIT License.
In the following example we are lazy loading YouTube embed video using
You can start using this plugin in your project in any of the following ways.
- Download the latest release version of dyClockJS from its GitHub repository.
- Run the following NPM command to get the latest release of the project.
$ npm i dyyoutubelazyloadjs
- Or use dyYouTubeLazyLoadJS via jsDelivr CDN.
For production environment you can use the compressed version found inside the
For development purpose you can check out the uncompressed code inside the
In the following example we have the starter code.
How to use?
div element and give it the class
dy-yt-lazyload-container. Next, add the data
data-videoid to the div element and set the value to the video id of the YouTube video that
you want to embed.
Let's say we want to embed the following YouTube video (https://www.youtube.com/watch?v=FZjXYSmCntU).
The video id for the above YouTube video is
FZjXYSmCntU. So, we will create the following div element.
<div class="dy-yt-lazyload-container" data-videoid="FZjXYSmCntU"></div>
Now, when the page will load it will render the video thumbnail. If the user clicks on the thumbnail then the plugin will lazy load the YouTube video.