Youtube LazyLoad

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

Status

View Preview

Table of contents

• Status
• Quick Start
• What's included
• Bugs and feature requests
• Installation
• How to Use
• Features
• CSS Classes
• FAQ
• 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/
 │
 └─ 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.

Installation

1. Download and copy files to your project
2. Open 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.
5. Add CSS and JavaScript to your project:

    <link href="https://example.com/yt-lazyload/4.x.x/css/yt-lazyload.min.css" rel="stylesheet">
    <script src="https://example.com/yt-lazyload/4.x.x/js/yt-lazyload.min.js"></script>

NOTE: Because of small file sizes I recommend adding CSS & JS inline!

    <style>...</style>
    <script>...</script>

How to Use

1. Get Youtube ID of your movie, example: d4AmYBhGBfM
2. Add the folowing code to embed a video:

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

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

CSS Classes

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: <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 and documentation copyright 2017-2020 The MUDA Organization.

Code released under the MIT License.