Vimeo LazyLoad

LazyLoad Embed Vimeo 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
• 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/vimeo-lazyload.git
• Install with Composer: composer require the-muda-organization/vimeo-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

vi-lazyload/
 │
 └─ 1.x.x/
    │
    ├── css/
    │   ├── vi-lazyload.css
    │   └── vi-lazyload.min.css
    │
    └── js/
        ├── vi-lazyload.js
        └── vi-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 vi-lazyload.js
3. Change:
   line 24 vi_image.src = 'https://example.com/' + data_id + data_thumb + '.jpg'; to custom folder to store your thumbnails.
   I am not sure if it will work in all cases, but you may use vimeo domain https://i.vimeocdn.com/video/**VIDEO-ID**.webp?mw=700&mh=392
4. Minify JavaScript and place it in vi-lazyload.min.js.
5. Add CSS and JavaScript to your project:

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

---

How to Use

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

<div class="vi-lazyload" data-id="272532681" data-thumb="" data-logo="3"></div>

3. Name your thumbnail using Vimeo ID 272532681.jpg - to use other file types change file type in JavaScript
4. Place your thumbnail in a folder specified in JavaScript

---

Features

Attribute	Explanation
class="vi-lazyload"	Main container. You can add additional style like border, box-shadow etc. or Bootstrap classes like img-thumbnail, shadow etc.
data-id="272532681"	Vimeo video ID
data-thumb=""	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 272532681.jpg and add custom suffix. For 3 thumbnails make 272532681--1.jpg, 272532681--2.jpg and 272532681--3.jpg. To show thumbnail 2 use data-thumb="--2" and so on. You can randomize numbers using <?php echo mt_rand(1,3);?>. Leave empty if you have only 1 thumbnail.
data-logo="3"	Vimeo logo color. Available: 0 = none, 1 = blue, 2 = dark, 3 = white. You can customize it in CSS.

---

CSS Classes

CSS class	Explanation
.vi-lazyload	main container
.vi-lazyload-img	thumbnail
.vi-lazyload-playbtn	play button (black)
.vi-lazyload-playbtn:hover	play button on hover (blue)
.vi-lazyload-logo	Vimeo logo
.vi-lazyload-logo:hover	Vimeo logo on hover
.vi-lazyload[data-logo="X"] .vi-lazyload-logo	Vimeo logo color based on data attribute
.vi-lazyload iframe	Vimeo embeded iframe after click

---

Versioning

Vimeo 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.

---