Press "Enter" to skip to content

Simple and Lightweight Load Youtube Video Only When Needed – Youtube LazyLoad

How to Make Embedded Videos Load Faster – Yet one other Youtube lazy loader that delays the loading of Youtube video participants to enhance the efficiency of your net web page.

The Youtube lazy loader fetches and shows the Youtube thumbnail on the webpage and masses the video when wanted (on click on).

How to make use of it – Lazy Load Youtube Embed

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

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

Customize the thumbnail to fetch.

Apply your individual types to the Youtube video participant.

.yt-lazyload 
  /* main container */


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

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

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

.yt-lazyload-logo 

.yt-lazyload-logo:hover 

.yt-lazyload[data-logo="X"] .yt-lazyload-logo 

.yt-lazy iframe {
  /* iframe */
}

How to Make Embedded Videos Load, Optimize Embedded Youtube Video, LazyLoad Embed Youtube Player, Modern HTML

Changelog:

v4.0.1 (08/09/2020)

  • Fixed youtube play button in .yt-lazyload-playbtn and .yt-lazyload-playbtn:hover. New SVG comes from a youtube web site.
  • Fixed SVG – eliminated charset utf8 from background-image as it isn’t required. Modifications in .yt-lazyload[data-logo=”X”] .yt-lazyload-logo

v4.0.0 (10/25/2019)

  • the modified format in order that container maintains 16/9 ratio even when JS not loaded
  • thumbnails are loaded as background-image utilizing model attributes and CSS variables
  • added lazyload utilizing Intersection Observer API
  • youtube brand & hyperlink not added when data-logo=”0″
  • necessary settings moved to variables at the beginning of JS file

v3.1.0 (10/25/2019)

  • shade brand now has 2 variations – 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 barely incorrect form. The new picture was taken straight from the youtube web site.
  • play button dimensions now use prime:0;proper:0;backside:0;left:0; as a substitute of width:100%;peak:100%
  • brand – new SVG
  • brand background-size:100% modified to background-size:include
  • eliminated !necessary from properties the place it’s pointless. It is added solely to crucial CSS
  • variable names up to date to extra constant ones for simpler improvement – prefix yt_ was added to maintain the code clearly. This will likely be useful sooner or later in case new and extra superior options will likely be added.
  • iframe supply is now set utilizing ingredients.src = “” as a substitute of ingredient.setAttribute(‘src’,”);
  • the picture alt attribute is now set utilizing ingredients.alt = “” as a substitute of ingredient.setAttribute(‘alt’,”);

v3.0.1 (10/05/2019)

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

v3.0 (08/04/2019)

  • Fixed bugs, up to date youtube iframe attributes. The Youtube brand is now loaded with CSS. Simplified and minified code.

See Demo And Download

Official Website(the-muda-organization): Click Here

This superior jQuery plugin is developed by the-muda-organization. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *