README

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
• 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/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/
 │
 └─ dist/
    │
    ├── 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 settings:
   • settings_thumb_base_url to custom URL where your thumbnails are located.
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/2.x.x/css/vi-lazyload.min.css" rel="stylesheet">
    <script src="https://example.com/vi-lazyload/2.x.x/js/vi-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 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>

1. Name your thumbnail using Vimeo ID 272532681.jpg - to use other file types change settings in JavaScript
2. Place your thumbnail in a folder set in JavaScript

Features

CSS Classes

FAQ

• Can I use Vimeo domain to get thumbnails?
  • Not as easy as on Youtube. Vimeo doesn't use video id for its thumbnails. You need to use Vimeo API to get URL of thumbnail.
• Can I use Vimeo lazyload with other frameworks like Bootstrap?
  • Yes you can! There should be no conflict with other frameworks.
• Can I embed video players other than Vimeo?
  • Check out our sister project for Youtube Player: https://github.com/the-muda-organization/youtube-lazyload

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.