Lazy Load Youtube Video With JavaScript – llyv.js

Preview:

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:

• Delay Loading Of Iframe Embedded Content Until Clicking – lazyembed.js
• Lazy Load iFrame Embedded Content With JavaScript – lazyframe.js

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>
...