Only Load Youtube Video Player After Clicking The Thumbnail – LazyTube

LazyTube is an ultra-light Youtube video lazy load library which only loads/displays video thumbnails on the page and fetches the Youtube video player only when the thumbnail is clicked.

Great for improving the page performance when there’re lots of Youtube videos are embedded in the document.

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
• Load Youtube Video Only When Needed – Youtube LazyLoad

How to use it:

Load the minified version of the LazyTube library into the html document.

<link href="lazytube.min.css" rel="stylesheet" />
<script src="lazytube.min.js"></script>

Embed Youtube videos into the document by inserting the video ID into the data-embed attribute of a container element with the CSS class of js-lazytube. That’s it.

<div class="js-lazytube" data-embed="AYdQUS7jfPA" data-width="640"></div>
<div class="js-lazytube" data-embed="rWdwbUP4iyc" data-width="640"></div>
<div class="js-lazytube" data-embed="vc8MddDFRw4" data-width="640"></div>
<div class="js-lazytube" data-embed="FF1PPFH2lpA" data-width="640"></div>