LazyLoad Embed Youtube Player – yt-lazyload.js

LazyLoad Embed Youtube Player – simple and lightweight plugin – pure JS
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).

Libraries

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

<link href="https://example.com/yt-lazyload/3.x.x/css/yt-lazyload.min.css" rel="stylesheet">
<script src="https://example.com/yt-lazyload/3.x.x/js/yt-lazyload.min.js"></script>

How to use

  1. Get Youtube ID of your movie, example: d4AmYBhGBfM
  2. Add the folowing code to embed a video:
<div class="yt-lazyload" data-id="d4AmYBhGBfM" data-random="" data-logo="3"></div>
  1. Name your thumbnail using Youtube ID d4AmYBhGBfM.jpg – to use other file types change file type in JS file
  2. Place your thumbnail in a folder specified in JS file

Here are the list of options you can use.

Attribute Explanation
class="yt-lazyload" Main container. You can add additional styling classes ex. border, box-shadow etc.
data-id="d4AmYBhGBfM" Youtube video ID
data-random="" If you need to add more thumbnails here you can randomize which one is displayed. Name your files d4AmYBhGBfM.jpg adding custom suffix. For 3 thumbnails make d4AmYBhGBfM--1.jpg, d4AmYBhGBfM--2.jpg and d4AmYBhGBfM--3.jpg. To show thumbnail 2 use data-random="--2" and so on. You can randomize numbers using <?php echo mt_rand(1,3);?>. Leave empty if you have only 1 thumbnail.
data-logo="3" Youtube logo color. Available: 0=none, 1=black, 2=red, 3=white. You can customize it in CSS file.



CSS Classes – Use following css classes to customize the design.

CSS class Explanation
.yt-lazyload main container
.yt-lazyload-img thumbnail
.yt-lazyload-playbtn play button (black)
.yt-lazyload-playbtn:hover play button on hover (red)
.yt-lazyload-logo Youtube logo
.yt-lazyload-logo:hover Youtube logo on hover
.yt-lazyload[data-logo="X"] .yt-lazyload-logo Youtube logo color based on data attribute
.yt-lazyload iframe Youtube embeded iframe after click

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by the-muda-organization, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.