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

Category: Javascript , Loading | March 23, 2021
Views Total:5,838 views
Official Page:Go to website
Last Update:March 23, 2021


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


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


v2.1.0 (03/23/2020)

  • Optimized Vimeo logo (7.25KB smaller CSS) – 3 different color variants were changed to a single color in CSS variable. CSS filter is used to generate white and dark variants. Similar solution is used in Bootstrap-5 CSS (see .btn-close-white).
  • Fixed SVG – removed charset utf-8 from each SVG in background-image as it is not required.
  • Updated Vimeo iframe allow=”” attribute – added picture-in-picture

v2.0.0 (06/21/2020)

  • changed layout so that container maintains 16/9 ratio even if JS not loaded
  • thumbnails are loaded as background-image using style attributes and CSS variables.
  • added lazyload (using Intersection Observer API
  • vimeo logo & link not added when data-logo=”0″
  • important settings moved to variables at the beginning of JS file

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