Load Youtube Video Only When Needed – Youtube LazyLoad

Preview:

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:

• Delay Loading Of Iframe Embedded Content Until Clicking – lazyembed.js
• Lazy Load iFrame Embedded Content With JavaScript – lazyframe.js
• Lazy Load Youtube Video With JavaScript – llyv.js

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.