Lazy Load Vimeo Video Player Until You Click The Thumbnail – Vimeo Lazyload

Javascript Lazyload Popup Added By Hossain
548
0
Demo
Download

Vimeo LazyLoad is the sibling project of the Youtube LazyLoad that load Vimeo video player on-demand when the user clicks on the play button & thumbnail image.



How to use it:

Load the Vimeo LazyLoad’s JavaScript and CSS files in 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 in the data-id attribute:

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

Customize the color of the Vimeo logo.

  • 0=none
  • 1=blue
  • 2=dark
  • 3=white
<div class="vi-lazyload" data-id="272532681" data-logo="2"></div>
  • Customize the thumbnail to fetch using the data-thumb attribute.
<div class="vi-lazyload" data-id="272532681" data-thumb="3"></div>
  • Apply your own styles to the Vimeo video player.
.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 */ 
}
You Like Related