dyYouTubeLazyLoadJS

Project

Share
dyYoutubeLazyLoadJS logo

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.

license npm version

Become a Patron

If you find this project useful then feel free to back it. I'm on Patreon

Feeling generous

Buy me a cup of tea Donate via PayPal

Contents

License

It's free and released under MIT License.

Demo

In the following example we are lazy loading YouTube embed video using dyYouTubeLazyLoadJS.

Video #1
Video #2

Getting started

You can start using this plugin in your project in any of the following ways.

The dist directory

For production environment you can use the compressed version found inside the dist directory.

For development purpose you can check out the uncompressed code inside the src directory.

Starter template

In the following example we have the starter code.

<!DOCTYPE html>
<html>
  <head>
  <title>Index Page</title>

  <!-- dyYouTubeLazyLoadJS style -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dyyoutubelazyloadjs@0.2.6/dist/css/dyYouTubeLazyLoad.min.css" >

  </head>
  <body>

  <!-- div for youtube video -->
  <div class="dy-yt-lazyload-container" data-videoid="FZjXYSmCntU"></div>

  <!-- dyYouTubeLazyLoadJS javascript -->
  <script src="https://cdn.jsdelivr.net/npm/dyyoutubelazyloadjs@0.2.6/dist/js/dyYouTubeLazyLoad.min.js"></script>

  </body>
</html>

How to use?

Create a div element and give it the class dy-yt-lazyload-container. Next, add the data attribute data-videoid to the div element and set the value to the video id of the YouTube video that you want to embed.

Example

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.

Share