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

Category: Javascript , Loading | February 9, 2020
Author: the-muda-organization
Views Total: 411
Official Page: Go to website
Last Update: February 9, 2020
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 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 */ 
}

Changelog:

v1.0.3 (02/09/2020)

  • Vimeo iFrame has transparent padding so sometimes part of the thumbnail was visible beneath the video. Solved by adding background-color:#000

v1.0.2 (10/26/2019)

  • play button background properties moved from shorthand declaration to background-position, background-size, background-position and background-image.
  • play button svg was minified
  • play button dimensions now use top:0;right:0;bottom:0;left:0; instead of width:100%;height:100%
  • logo – new svg logo
  • logo background-size:100% changed to background-size:contain
  • removed !important from properties where it’s unnecessary. It is added only to the most important CSS
  • data-random=”” was changed to data-thumb=”” for easier use of vi-lazyload
  • variable names updated to more consistent ones for easier development – prefix vi_ was added to keep the code clean. This will be usefull in the future in case new and more advanced features will be added.
  • iframe source is now set using element.src = “” instead of element.setAttribute(‘src’,”);
  • image alt attribute is now set using element.alt = “” instead of element.setAttribute(‘alt’,”);

You Might Be Interested In:


Leave a Reply