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

Preview:

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:

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’,”);