Simple and Lightweight LazyLoad Embed Vimeo Player Plugin

LazyLoad Embed Vimeo Player – Simple and Lightweight Plugin – Pure JavaScript.

Vimeo LazyLoad is the sister project of Youtube LazyLoad that loads an on-demand Vimeo video player when the user clicks the play button and the thumbnail.

Must Read: Simple and Lightweight Load Youtube Video Only When Needed – Youtube LazyLoad

Table of Contents

How to make use of it:

Load the Vimeo LazyLoad’s JavaScript and CSS files within the document.

<link href="vi-lazyload.min.css" rel="stylesheet">
<script src="vi-lazyload.min.js">

Create an empty container for the Vimeo video and specify the video ID within the data-id attribute:

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

Customize the color of the Vimeo.

<div class="vi-lazyload" data-id="123456789" data-logo="2"></div>

Customize the thumbnail to fetch utilizing the data-thumb attribute.

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

Apply your styles to the Vimeo video.

.vi-lazyload { 
  /* main container */ 
} 

.vi-lazyload-img {
  /* thumbnail */ 
} 

.vi-lazyload-playbtn {
  /* play button */ 
} 

.vi-lazyload-playbtn:hover { 
  /* play button on hover */ 
} 

.vi-lazyload-logo { 
  /* logo */ 
} 

.vi-lazyload-logo:hover { 
  /* logo on hover */ 
} 

.vi-lazyload[data-logo="X"]  .vi-lazyload-logo { 
  /* logo color based on the data attribute */ 
} 

.vi-lazy iframe { 
  /* iframe */ 
}

Features

Must Read: Vue.js Component For Lazyloading YouTube Videos

Attribute	Explanation
`class="vi-lazyload"`	Main container. You can add additional styles 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 you can choose which one is displayed. It is useful for quality-specific thumbs (SD, 720p, 1080p), or in case of multiple thumbs, a random one can be selected. Name your files 272532681.jpg and add the 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. You can customize it in CSS. 0 = none – logo will not be added by JavaScript, 1 = blue, 2 = dark, 3 = white.

CSS Classes

Must Read: Lazy Javascript Loader for Images and Iframes | AyLazyLoader

CSS class	Explanation
`.vi-lazyload`	main container
`.vi-lazyload::before`	pseudo-element used to maintain container ratio and set `background-color`
`.vi-lazyload-wrap`	container and its content added via javascript
`.vi-lazyload-content`	container for the play button, logo, and thumbnail as `background-image`
`.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 embedded iframe after a click