Download the PHP package the-muda-organization/youtube-lazyload without Composer

On this page you can find all versions of the php package the-muda-organization/youtube-lazyload. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of the-muda-organization/youtube-lazyload

Informations about the package youtube-lazyload

Youtube LazyLoad

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

Status

GitHub Version License

Github Star Github Fork

CSS gzip size JS gzip size

View Preview

Table of contents

Quick Start

Several options are available:

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 How to Use

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:

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

How to Use

  1. Get Youtube ID of your movie, example: d4AmYBhGBfM

  2. Add the folowing code to embed a video:

  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

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.

Team

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.

All versions of youtube-lazyload with dependencies

PHP Build Version
Package Version
No informations.
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package the-muda-organization/youtube-lazyload contains the following files

Loading the files please wait ....