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).
Installation
- Download and copy files to your project
- Open yt-lazyload.js
- Change the following lines:
- Minify JS and place it in yt-lazyload.min.js
- Add CSS and JS to your project:
How to Use
- Get Youtube ID of your movie, example:
d4AmYBhGBfM
- Add the folowing code to embed a video:
="embed-yt-lazy" data-embed-yt-lazy="d4AmYBhGBfM" data-embed-yt-lazy-random="" data-embed-yt-lazy-logo="white">
> - 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
Features
Attribute | Explanation |
---|---|
class="embed-yt-lazy" |
Main container. You can add additional styling classes ex. border, box-shadow etc. |
data-embed-yt-lazy="d4AmYBhGBfM" |
Youtube video ID |
data-embed-yt-lazy-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-embed-yt-lazy-random="--2" and so on. You can randomize numbers using . Leave empty if you have only 1 thumbnail. |
data-embed-yt-lazy-logo="white" |
Youtube logo color. Available: white, black, red |
CSS Classes
CSS class | Explanation |
---|---|
.embed-yt-lazy |
main container |
.embed-yt-lazy-img |
thumbnail |
.embed-yt-lazy-play-btn |
play button (black) |
.embed-yt-lazy-play-btn:hover |
play button on hover (red) |
.embed-yt-lazy-logo |
Youtube logo |
.embed-yt-lazy-logo:hover |
Youtube logo on hover |
.embed-yt-lazy iframe |
Youtube embeded iframe after click |
See live demo and download source code.
This awesome plugin is developed by the-muda-organization. Visit their official github repository for more information and follow for future updates.