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
- Get Youtube ID of your movie, example:
d4AmYBhGBfM - Add the folowing code to embed a video:
|
- Name your thumbnail using Youtube ID
d4AmYBhGBfM.jpg– to use other file types change file type in JS file - 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 |
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.
This awesome script developed by the-muda-organization, Visit their official github repository for more information and follow for future updates.
