Only Load Youtube Video Player After Clicking The Thumbnail – LazyTube

Category: Javascript , Loading | July 31, 2019
Author: louisgab
Views Total: 161
Official Page: Go to website
Last Update: July 31, 2019
License: MIT

Preview:

Only Load Youtube Video Player After Clicking The Thumbnail – LazyTube

Description:

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:

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>

 

You Might Be Interested In:


Leave a Reply