Lazy Load Youtube Video in JavaScript – llyv.js

Category: Loading | August 10, 2018
Lazy Load Youtube Video in JavaScript
Author: wingkwong
Official Page: Go to Website
Last Update:March 28, 2019
License:MIT

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.

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.