Load Youtube Video Only When Needed – Youtube LazyLoad

Category: Javascript , Loading | August 9, 2020
Author:the-muda-organization
Views Total:579 views
Official Page:Go to website
Last Update:August 9, 2020
License:MIT

Preview:

Load Youtube Video Only When Needed – Youtube LazyLoad

Description:

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-thumb="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 */
}

Changelog:

v4.0.1 (08/09/2020)

  • Fixed youtube play button in .yt-lazyload-playbtn and .yt-lazyload-playbtn:hover. New SVG comes from youtube website.
  • Fixed SVG – removed charset utf8 from background-image as it is not required. Modifications in .yt-lazyload[data-logo=”X”] .yt-lazyload-logo

v4.0.0 (10/25/2019)

  • changed layout so that container maintains 16/9 ratio even if JS not loaded
  • thumbnails are loaded as background-image using style attributes and CSS variables
  • added lazyload using Intersection Observer API
  • youtube logo & link not added when data-logo=”0″
  • important settings moved to variables at the beginning of JS file

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:


6 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!

    Reply
    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 🙂

      Reply
    2. sinfulexperience

      Just setup the image thumbnail inside the js.

      //image – thumbnail
      yt_image.classList.add(‘yt-lazyload-img’);
      yt_image.src = ‘https://example.com/’ + data_id + data_random + ‘.jpg’;
      yt_image.alt = ”;

      change to this

      //image – thumbnail
      yt_image.classList.add(‘yt-lazyload-img’);
      yt_image.src = ‘https://img.youtube.com/vi/’ + data_id + data_random + ‘/maxresdefault.jpg’;
      yt_image.alt = ”;

      Reply
      1. schnee kranich

        Hi there, it works (almost) great…but maybe it wants too much in too short-a-time. On my website it displays some of the thumbs as “grey”. I changed the maxresdefault.jpg to sddefault.jpg what seems to help a little bit. Do you have any idea what to do about this? Would be greatly appreciated!

        Reply
  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?

    Reply

Leave a Reply