Youtube LazyLoad

LazyLoad Embed Youtube Player - simple and lightweight plugin - pure JavaScript

Status

View Preview

Status
Quick Start
What's included
Bugs and feature requests
Installation
How to Use
Features
CSS Classes
Versioning
Changelog
Team
Code of Conduct
Copyright and License

Quick Start

Several options are available:

Download the latest release.
Clone the repo: git clone https://github.com/the-muda-organization/youtube-lazyload.git
Install with Composer: composer require the-muda-organization/youtube-lazyload

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

There are no dependencies. No jQuery or other plugins required. See below for Installation Guide and How to Use

yt-lazyload/
 │
 └─ 3.x.x/
    │
    ├── css/
    │   ├── yt-lazyload.css
    │   └── yt-lazyload.min.css
    │
    └── js/
        ├── yt-lazyload.js
        └── yt-lazyload.min.js

Bugs and feature requests

Have a bug or a feature request? Before opening a new issue search for existing and closed issues. If your problem or idea is not addressed yet, open a new issue.

Installation

Download and copy files to your project
Open yt-lazyload.js
Change:
line 24 yt_image.src = 'https://example.com/' + data_id + data_random + '.jpg'; to custom folder to store your thumbnails.
I am not sure if it will work in all cases, but you may use youtube domain https://img.youtube.com/vi/**VIDEO-ID**/maxresdefault.jpg
Minify JavaScript and place it in yt-lazyload.min.js.
Add CSS and JavaScript to your project:

    <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:

<div class="yt-lazyload" data-id="d4AmYBhGBfM" data-random="" data-logo="3"></div>

Name your thumbnail using Youtube ID d4AmYBhGBfM.jpg - to use other file types change file type in JavaScript
Place your thumbnail in a folder specified in JavaScript https://example.com/

Features

Attribute	Explanation
`class="yt-lazyload"`	Main container. You can add additional style like `border`, `box-shadow` etc. or Bootstrap classes like `img-thumbnail`, `shadow` etc.
`data-id="d4AmYBhGBfM"`	Youtube video ID
`data-random=""`	If you need to add more thumbnails here you can choose which one is displayed. It is usefull for quality specific thumbs (SD, 720p, 1080p etc) or in case of multiple thumbs random one can be selected. Name your files `d4AmYBhGBfM.jpg` and add 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. In future version it will be renamed to `data-thumb=""` 😊
`data-logo="3"`	Youtube logo color. Available: 0 = none, 1 = black, 2 = color-black, 3 = white, 4 = color-white (available in v3.1.0+). You can customize it in CSS.

CSS Classes

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

Versioning

Youtube LazyLoad will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format: <major>.<minor>.<patch>

Changelog

For last releases see detailed CHANGELOG.

Team

Jakub Muda

Code of conduct

We will behave ourselves if you behave yourselves. For more details see our CODE_OF_CONDUCT.md.

Copyright and license

Code released under the MIT License.

codingindie/youtube-lazyload