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

Category: Javascript , Loading | August 19, 2019
Author: the-muda-organization
Views Total: 69
Official Page: Go to website
Last Update: August 19, 2019
License: MIT

Preview:

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

Description:

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.

<div class="vi-lazyload" data-id="272532681" data-random="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 Might Be Interested In:


Leave a Reply