Load Youtube Video Only When Needed – Youtube LazyLoad

Category: Javascript , Loading | October 25, 2019
Author: the-muda-organization
Views Total: 2,180 views
Official Page: Go to website
Last Update: October 25, 2019
License: MIT


Load Youtube Video Only When Needed – Youtube LazyLoad


Yet another Youtube lazy loader that delays the loading of Youtube video player to improve the performance of your web page.

The Youtube lazy loader fetches and displays the Youtube thumbnail on the webpage and loads the video when needed (on click).

See also:

How to use it:

Load the Youtube LazyLoad’s JavaScript and CSS files in the html.

<link href="yt-lazyload.min.css" rel="stylesheet">
<script src="yt-lazyload.min.js">

Create an empty container for the Youtube video and specify the video ID in the data-id attribute:

<div class="yt-lazyload" data-id="SACu6d2pdOI"></div>

Customize the color of the Youtube logo. 0=none, 1=black, 2=color-black, 3=white, 4=color-white

<div class="yt-lazyload" data-id="SACu6d2pdOI" data-logo="1"></div>

Customize the thumbnail to fetch.

<div class="yt-lazyload" data-id="SACu6d2pdOI" data-random="1"></div>

Apply your own styles to the Youtube video player.

.yt-lazyload {
  /* main container */

.yt-lazyload-img {
  /* thumbnail */

.yt-lazyload-playbtn {
  /* play button */

.yt-lazyload-playbtn:hover {
  /* play button on hover */

.yt-lazyload-logo {
  /* logo */

.yt-lazyload-logo:hover {
  /* logo on hover */

.yt-lazyload[data-logo="X"] .yt-lazyload-logo {
  /* logo color based on the data attribute */

.yt-lazy iframe {
  /* iframe */


v3.1.0 (10/25/2019)

  • color logo now has 2 versions – color-dark and color-white
  • play button background properties moved from shorthand declaration to background-position, background-size, background-position and background-image.
  • play button svg had slightly incorrect shape. New image was taken directly from youtube website.
  • play button dimensions now use top:0;right:0;bottom:0;left:0; instead of width:100%;height:100%
  • logo – new svg
  • logo background-size:100% changed to background-size:contain
  • removed !important from properties where it’s unnecessary. It is added only to the most important CSS
  • variable names updated to more consistent ones for easier development – prefix yt_ was added to keep the code clean. This will be usefull in the future in case new and more advanced features will be added.
  • iframe source is now set using element.src = “” instead of element.setAttribute(‘src’,”);
  • image alt attribute is now set using element.alt = “” instead of element.setAttribute(‘alt’,”);

v3.0.1 (10/05/2019)

  • Optimizing Links for Chrome Audits – added rel = ‘noreferrer’

v3.0 (08/04/2019)

  • Fixed bugs, updated youtube iframe attributes. Youtube logo is now loaded with CSS. Simplified and minified code.

You Might Be Interested In:

5 thoughts on “Load Youtube Video Only When Needed – Youtube LazyLoad

  1. Maarten

    1. In version 2.1.1 there was an option to use a specific quality for the thumbnail. Version 3.0.0 is automatically loading the maxresolution is this correct? It would be nice if you can tell the script again which resolution you want to show. That can save bandwith as well 🙂

    2. The example page shows version 2.1.1 instead of version 3.0.0

    3. The download package uses ‘example.com’ instead of ‘img.youtube.com’ and therefor the JavaScript won’t work.

    But, I’m still using version 2.1.1 and it works perfect for my needs! Thanks!

    1. Jakub Muda

      #1 – nothing changed. You can still choose the quality you want, nothing changed here from version 2.1.1. Just set your storage folder in javascript.

      #2 – Github always has the latest release and docs.

      #3 – This is the only thing you need to customize to use the script. 🙂

      The main advantage of version 3.0.0 is youtube logo in CSS instead of loading images for each video.

      Check out documentation: https://github.com/the-muda-organization/youtube-lazyload

      This is my script and it’s good to know it is usefull 🙂

    2. sinfulexperience

      Just setup the image thumbnail inside the js.

      //image – thumbnail
      yt_image.src = ‘https://example.com/’ + data_id + data_random + ‘.jpg’;
      yt_image.alt = ”;

      change to this

      //image – thumbnail
      yt_image.src = ‘https://img.youtube.com/vi/’ + data_id + data_random + ‘/maxresdefault.jpg’;
      yt_image.alt = ”;

  2. Sonja Van Uden

    Out of curiosity, using Microsoft Edge of Internet Explorer the demo page does not seem to work. It is showing in Google Chrome and Firefox though. Do I miss something?


Leave a Reply