Simple and Lightweight LazyLoad Embed Vimeo Player Plugin in Pure JavaScript

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

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 */ 


Must Read: Vue.js Component For Lazyloading YouTube Videos

class="vi-lazyload"Main container.

You can add additional styles like borderbox-shadow etc. or Bootstrap classes like img-thumbnailshadow 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.jpg272532681--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 classExplanation
.vi-lazyloadmain container
.vi-lazyload::beforepseudo-element used to maintain container ratio and set background-color
.vi-lazyload-wrapcontainer and its content added via javascript
.vi-lazyload-contentcontainer for the play button, logo, and thumbnail as background-image
.vi-lazyload-playbtnplay button (black)
.vi-lazyload-playbtn:hoverplay button on hover (blue)
.vi-lazyload-logoVimeo logo
.vi-lazyload-logo:hoverVimeo logo on hover
.vi-lazyload[data-logo="X"] .vi-lazyload-logoVimeo logo color based on data attribute
.vi-lazyload iframeVimeo embedded iframe after a click

See Demo And Download


Official Website(the-muda-organization): Click Here

This superior jQuery/javascript plugin is developed by the-muda-organization. For extra Advanced Usages, please go to the official website.

Related Posts


A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…


A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…


Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…


Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…


jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…


Customizable & Composable Charts for VueJS | vue-wcharts

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or…

Leave a Reply

Your email address will not be published. Required fields are marked *