Press "Enter" to skip to content

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.

Vimeo video slow to load, lazy load youtube embed wordpress, vimeo player plugin, vimeo thumbnail

How to make use of it:

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

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

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

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

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

Apply your personal styles to the Vimeo video participant.

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

Lazy Load Vimeo Video Player Until You Click The Thumbnail, Vimeo LazyLoad Plugin/Github, vimeo embed slow to load, get vimeo video thumbnail, lazy load youtube embed


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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.