It is a pure javascript library to add lazy load youtube video. By adding the lazy effect means that to optimize the website. You can add lazy effect to multiple youtube, Vimeo and other iframe code videos on the same page. It will increase the loading page performance and allow to quickly load the videos as user scroll the page down.
Just to mention here that, this plugin works with videos only and if you are looking for a solution for images then have a look Lazy Loading Images on scroll plugin which also builds with Javascript.
The purpose of this plugin to be built is to load the thumbnails of video instead of loading video and the video will trigger only when its thumbnail is being clicked.
Implement Youtube Lazy Load Effect
You need to download the compressed version of CSS and Javascript code and add it into your webpage.
https://cdn.rawgit.com/wingkwong/lazy-load-youtube-videos/master/src/llyv.min.js https://cdn.rawgit.com/wingkwong/lazy-load-youtube-videos/master/src/llyv.min.css
Define a div element and add a class “llyv” to wrapper an element of your youtube video. To add the video, you simply need to specify the video ID in the data-id HTML5 attribute.
<div class="llyv" data-id="Bey4XXJAqS8"></div> <div class="llyv" data-id="Bey4XXJAqS8"></div> <div class="llyv" data-id="Bey4XXJAqS8"></div> <div class="llyv" data-id="Bey4XXJAqS8"></div>
Nothing else needs to do. Its ready to use and enjoy.