Load Youtube Video Only When Needed – Youtube LazyLoad

Category: Javascript , Loading | November 15, 2018
Author: the-muda-organization
Views Total: 839
Official Page: Go to website
Last Update: November 15, 2018
License: MIT


Load Youtube Video Only When Needed – Youtube LazyLoad


Yet another Youtube lazy loader that delays the loading of Youtube video player to improve the performance of your web page.

The Youtube lazy loader fetches and displays the Youtube thumbnail on the webpage and loads the video when needed (on click).

See also:

How to use it:

Load the Youtube LazyLoad’s JavaScript and CSS files in the html.

<link href="yt-lazyload.min.css" rel="stylesheet">
<script src="yt-lazyload.min.js">

Create an empty container for the Youtube video and specify the video ID in the data-embed-yt-lazy attribute:

<div class="embed-yt-lazy" data-embed-yt-lazy="SACu6d2pdOI"></div>

Customize the color of Youtube logo.

<div class="embed-yt-lazy" data-embed-yt-lazy="SACu6d2pdOI" data-embed-yt-lazy-logo="red"></div>

You Might Be Interested In:

Leave a Reply