LazyLoad Embed Youtube Player in Pure 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).


Installation

  1. Download and copy files to your project
  2. Open yt-lazyload.js
  3. Change the following lines:
  4. Minify JS and place it in yt-lazyload.min.js
  5. Add CSS and JS to your project:

How to Use

  1. Get Youtube ID of your movie, example: d4AmYBhGBfM
  2. Add the folowing code to embed a video:
    <div class="embed-yt-lazy" data-embed-yt-lazy="d4AmYBhGBfM" data-embed-yt-lazy-random="" data-embed-yt-lazy-logo="white"></div>
  3. Name your thumbnail using Youtube ID d4AmYBhGBfM.jpg – to use other file types change file type in JS file
  4. 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 <?php echo rand(1,3);?>. 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.

DEMO | DOWNLOAD

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


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.