Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/the-muda-organization/youtube-lazyload
LazyLoad Embed YouTube Player - simple and lightweight plugin - pure JavaScript
https://github.com/the-muda-organization/youtube-lazyload
css html javascript javascript-library lazyload video youtube
Last synced: 21 days ago
JSON representation
LazyLoad Embed YouTube Player - simple and lightweight plugin - pure JavaScript
- Host: GitHub
- URL: https://github.com/the-muda-organization/youtube-lazyload
- Owner: the-muda-organization
- License: mit
- Created: 2018-10-21T01:38:42.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-03-29T04:09:11.000Z (almost 3 years ago)
- Last Synced: 2024-11-21T23:09:12.911Z (about 2 months ago)
- Topics: css, html, javascript, javascript-library, lazyload, video, youtube
- Language: HTML
- Homepage:
- Size: 3.29 MB
- Stars: 26
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Youtube LazyLoad
LazyLoad Embed Youtube Player - simple and lightweight plugin - pure JavaScript
********************************************************************************
## Status
[](https://github.com/the-muda-organization/youtube-lazyload)
[](https://github.com/the-muda-organization/youtube-lazyload)
[](https://github.com/the-muda-organization/youtube-lazyload)
[](https://github.com/the-muda-organization/youtube-lazyload)
[](https://github.com/the-muda-organization/youtube-lazyload/blob/master/dist/css/yt-lazyload.min.css)
[](https://github.com/the-muda-organization/youtube-lazyload/blob/master/dist/js/yt-lazyload.min.js)
********************************************************************************
## [View Preview](https://htmlpreview.github.io/?https://github.com/the-muda-organization/youtube-lazyload/blob/master/DEMO.html)
********************************************************************************
********************************************************************************
## Table of contents
- [Status](#status)
- [Quick Start](#quick-start)
- [What's included](#whats-included)
- [Bugs and feature requests](#bugs-and-feature-requests)
- [Installation](#installation)
- [How to Use](#how-to-use)
- [Features](#features)
- [CSS Classes](#css-classes)
- [FAQ](#faq)
- [Versioning](#versioning)
- [Changelog](#changelog)
- [Team](#team)
- [Code of Conduct](#code-of-conduct)
- [Copyright and License](#copyright-and-license)
********************************************************************************
## Quick Start
Several options are available:
- [Download the latest release.](https://github.com/the-muda-organization/youtube-lazyload/archive/master.zip)
- Clone the repo: `git clone https://github.com/the-muda-organization/youtube-lazyload.git`
- Install with [Composer](https://getcomposer.org/): `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](#installation) and [How to Use](#how-to-use)
```
yt-lazyload/
│
└─ dist/
│
├── 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](https://github.com/the-muda-organization/youtube-lazyload/issues/new).
********************************************************************************
## Installation
1. Download and copy files to your project
2. Open [yt-lazyload.js](https://github.com/the-muda-organization/youtube-lazyload/blob/master/dist/js/yt-lazyload.js)
3. Change settings:
- `settings_thumb_base_url` to custom URL where your thumbnails are located.
4. Minify JavaScript and place it in [yt-lazyload.min.js](https://github.com/the-muda-organization/youtube-lazyload/blob/master/dist/js/yt-lazyload.min.js).
5. Add CSS and JavaScript to your project:
```html
```
**NOTE: Because of small file sizes I recommend adding CSS & JS inline!**
```html
...
...
```
********************************************************************************
## How to Use
1. Get Youtube ID of your movie, example: ``d4AmYBhGBfM``
2. Add the folowing code to embed a video:
```html
```
3. Name your thumbnail using Youtube ID ``d4AmYBhGBfM.jpg`` - to use other file types change settings in JavaScript
4. Place your thumbnail in a folder set in JavaScript
********************************************************************************
## 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-thumb=""`` | If you need to add more thumbnails you can choose which one is displayed. It is usefull for quality specific thumbs (SD, 720p, 1080p) 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-thumb="--2"`` and so on.
You can randomize numbers using ````.
**Leave empty if you have only 1 thumbnail.**
``data-logo="3"`` | Youtube logo color. You can customize it in CSS.
**0** = none - logo will not be added by JavaScript,
**1** = black,
**2** = color-black,
**3** = white,
**4** = color-white (v4.0.0+).
********************************************************************************
## CSS Classes
CSS class | Explanation
------------ | -------------
``.yt-lazyload`` | main container
``.yt-lazyload::before`` | pseudo-element used to maintain container ratio and set `background-color`
``.yt-lazyload-wrap`` | container and its content added via javascript
``.yt-lazyload-content`` | container for play button, logo and thumbnail as `background-image`
``.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
********************************************************************************
## FAQ
- **Can I use Youtube domain to get thumbnails?**
- I am not sure if it will work in all cases, but you can try. You need to adjust JavaScript.
- Change `settings_thumb_base_url = 'https://img.youtube.com/vi/';`
- Change `this_content.style.setProperty('--yt-lazyload-img','url("' + settings_thumb_base_url + this_data_id + '/maxresdefault.jpg")');`
- **Can I use *Youtube lazyload* with other frameworks like Bootstrap?**
- Yes you can! There should be no conflict with other frameworks.
- **Can I embed video players other than Youtube?**
- Check out our sister project for Vimeo Player: https://github.com/the-muda-organization/vimeo-lazyload
- **Does it work on mobile devices?**
- Yes and no. Lazyload works as expected but autoplay is disabled by YouTube on iOS and Android. More info: https://stackoverflow.com/questions/15090782/youtube-autoplay-not-working-on-mobile-devices-with-embedded-html5-player
********************************************************************************
## Versioning
Youtube LazyLoad will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:
```..```
********************************************************************************
## Changelog
For last releases see detailed [CHANGELOG](https://github.com/the-muda-organization/youtube-lazyload/blob/master/CHANGELOG.md).
********************************************************************************
## Team
- [Jakub Muda](https://github.com/jakubmuda)
********************************************************************************
## Code of conduct
We will behave ourselves if you behave yourselves. For more details see our
[CODE_OF_CONDUCT.md](https://github.com/the-muda-organization/youtube-lazyload/blob/master/CODE_OF_CONDUCT.md).
********************************************************************************
## Copyright and license
Code and documentation copyright 2017-2020 [The MUDA Organization](https://muda.pl).
Code released under the [MIT License](https://github.com/the-muda-organization/youtube-lazyload/blob/master/LICENSE).
********************************************************************************