Lazy Load Youtube Video With JavaScript – llyv.js

Category: Javascript , Loading | August 7, 2018
Author:wingkwong
Views Total:1,452 views
Official Page:Go to website
Last Update:August 7, 2018
License:MIT

Preview:

Lazy Load Youtube Video With JavaScript – llyv.js

Description:

llyv.js is a Youtube Video lazy load library which allows the user to load Youtube Video Players on demand.

Great for improving the page load time when there’re lots of Youtube videos embedded in your document.

The library fetches and displays the video thumbnail with a play button on the webpage. The full Youtube video player will be loaded only when the thumbnail image or play button gets clicked.

See also:

How to use it:

Insert the JavaScript ‘llyv.js’ and Stylesheet ‘llyv.js’ into the html document.

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

Add the CSS class ‘llyv’ to the wrapper element of your Youtube video and specify the video ID in the ‘data-id’ attribute. Done.

<div class="llyv" data-id="hyZ60tjoud8"></div>
<div class="llyv" data-id="SoymL3XAHWk"></div>
...

You Might Be Interested In:


Leave a Reply