Custom Vimeo Lightbox (Advanced)

Live Preview

Documentation

Webflow

Code

Setup: External Scripts

HTML

Copy

<script src="https://player.vimeo.com/api/player.js"></script>

Step 1: Copy structure to Webflow

Copy to Webflow

Webflow structure is not required for this resource.

Step 1: Add HTML

HTML

Copy


<div class="vimeo-lightbox" data-vimeo-lightbox-init="" data-vimeo-activated="false" data-vimeo-playing="false" data-vimeo-fullscreen="false" data-vimeo-hover="false" data-vimeo-loaded="false" data-vimeo-update-size="true" data-vimeo-muted="false">
  <div data-vimeo-lightbox-control="close" class="vimeo-lightbox__bg">
    <svg class="vimeo-lightbox__loading-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="L9" x="0px" y="0px" viewbox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve" width="100%"><path fill="currentColor" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"></path><animatetransform attributename="transform" attributetype="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatcount="indefinite"></animatetransform></svg>
  </div>
  <div class="vimeo-lightbox__calc">
    <div class="vimeo-lightbox__calc-wrap">
      <div data-vimeo-lightbox-player="" class="vimeo-lightbox__player">
        <div class="vimeo-lightbox__before"></div>
        <iframe src="" width="640" height="360" frameborder="0" allowfullscreen="true" allow="autoplay; encrypted-media" class="vimeo-lightbox__iframe"></iframe>
        <img src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg" loading="lazy" alt="" class="vimeo-lightbox__placeholder">
        <div class="vimeo-lightbox__dark"></div>
        <div data-vimeo-control="play" class="vimeo-lightbox__play">
          <div class="vimeo-lightbox__btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none" class="vimeo-lightbox__btn-play-svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.38178 6.13982C6.40762 5.94017 6.48425 5.74878 6.60555 5.58089C6.72686 5.413 6.88949 5.27326 7.08049 5.17279C7.2715 5.07232 7.48559 5.01391 7.70574 5.00219C7.92587 4.99048 8.14597 5.02579 8.3485 5.10532C9.37235 5.50436 11.6669 6.45272 14.5784 7.98469C17.4908 9.51754 19.5395 10.8562 20.4294 11.4635C21.1891 11.9829 21.191 13.013 20.4304 13.5342C19.5491 14.1381 17.5256 15.4591 14.5784 17.0113C11.6283 18.5635 9.36078 19.5005 8.34657 19.8942C7.47311 20.2343 6.49554 19.7183 6.38178 18.8597C6.24873 17.856 6 15.5769 6 12.4989C6 9.42262 6.24777 7.14443 6.38178 6.13982Z" fill="currentColor"></path></svg>
          </div>
        </div>
        <div data-vimeo-control="pause" class="vimeo-lightbox__pause">
          <div class="vimeo-lightbox__btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none" class="vimeo-lightbox__btn-pause-svg"><path d="M8 6.5C8 6.22386 8.22386 6 8.5 6H10.5C10.7761 6 11 6.22386 11 6.5V17.5C11 17.7761 10.7761 18 10.5 18H8.5C8.22386 18 8 17.7761 8 17.5V6.5Z" fill="currentColor"></path><path d="M14 6.5C14 6.22386 14.2239 6 14.5 6H16.5C16.7761 6 17 6.22386 17 6.5V17.5C17 17.7761 16.7761 18 16.5 18H14.5C14.2239 18 14 17.7761 14 17.5V6.5Z" fill="currentColor"></path></svg>
          </div>
        </div>
        <div class="vimeo-lightbox__interface">
          <div class="vimeo-lightbox__interface-bottom">
            <div class="vimeo-lightbox__duration">
              <span data-vimeo-duration="" class="vimeo-lightbox__duration-span">0:00</span>
            </div>
            <div class="vimeo-lightbox__timeline">
              <progress min="0" max="100" value="0" class="vimeo-lightbox__timeline-progress"></progress>
              <input type="range" min="0" max="100" step="0.01" data-vimeo-control="timeline" class="vimeo-lightbox__timeline-input" value="0">
            </div>
            <div data-vimeo-control="mute" class="vimeo-lightbox__mute">
              <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none" class="vimeo-lightbox__volume-up-svg"><path d="M3 8.99998V15H7L12 20V3.99998L7 8.99998H3ZM16.5 12C16.5 10.23 15.48 8.70998 14 7.96998V16.02C15.48 15.29 16.5 13.77 16.5 12ZM14 3.22998V5.28998C16.89 6.14998 19 8.82998 19 12C19 15.17 16.89 17.85 14 18.71V20.77C18.01 19.86 21 16.28 21 12C21 7.71998 18.01 4.13998 14 3.22998Z" fill="currentColor"></path></svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none" class="vimeo-lightbox__volume-mute-svg"><path d="M16.5 12C16.5 10.23 15.48 8.71 14 7.97V10.18L16.45 12.63C16.48 12.43 16.5 12.22 16.5 12ZM19 12C19 12.94 18.8 13.82 18.46 14.64L19.97 16.15C20.63 14.91 21 13.5 21 12C21 7.72 18.01 4.14 14 3.23V5.29C16.89 6.15 19 8.83 19 12ZM4.27 3L3 4.27L7.73 9H3V15H7L12 20V13.27L16.25 17.52C15.58 18.04 14.83 18.45 14 18.7V20.76C15.38 20.45 16.63 19.81 17.69 18.95L19.73 21L21 19.73L12 10.73L4.27 3ZM12 4L9.91 6.09L12 8.18V4Z" fill="currentColor"></path></svg>
            </div>
            <div class="vimeo-lightbox__fullscreen" data-vimeo-control="fullscreen">
              <svg class="vimeo-lightbox__fullscreen-scale-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none" ><rect x="3" y="14" width="2" height="7" fill="currentColor"></rect><rect x="3" y="3" width="2" height="7" fill="currentColor"></rect><rect x="19" y="3" width="2" height="7" fill="currentColor"></rect><rect x="19" y="14" width="2" height="7" fill="currentColor"></rect><rect x="3" y="19" width="7" height="2" fill="currentColor"></rect><rect x="14" y="19" width="7" height="2" fill="currentColor"></rect><rect x="3" y="3" width="7" height="2" fill="currentColor"></rect><rect x="14" y="3" width="7" height="2" fill="currentColor"></rect></svg>
              <svg class="vimeo-lightbox__fullscreen-shrink-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none"><rect x="7" y="2" width="2" height="7" fill="currentColor"></rect><rect x="15" y="2" width="2" height="7" fill="currentColor"></rect><rect x="15" y="15" width="2" height="7" fill="currentColor"></rect><rect x="8" y="15" width="2" height="7" fill="currentColor"></rect><rect x="2" y="7" width="7" height="2" fill="currentColor"></rect><rect x="3" y="15" width="7" height="2" fill="currentColor"></rect><rect x="15" y="7" width="7" height="2" fill="currentColor"></rect><rect x="15" y="15" width="7" height="2" fill="currentColor"></rect></svg>
            </div>
          </div>
        </div>
        <div class="vimeo-lightbox__loading">
          <svg class="vimeo-lightbox__loading-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="L9" x="0px" y="0px" viewbox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve" width="100%"><path fill="currentColor" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"></path><animatetransform attributename="transform" attributetype="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatcount="indefinite"></animatetransform></svg>
        </div>
      </div>
    </div>
  </div>
  <button data-vimeo-lightbox-control="close" class="vimeo-lightbox__close"><div class="vimeo-lightbox__close-bar"></div><div class="vimeo-lightbox__close-bar is--duplicate"></div></button>
</div>

HTML structure is not required for this resource.

Step 2: Add CSS

CSS

Copy

.vimeo-lightbox {
  z-index: 300;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  padding: 5vw;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.vimeo-lightbox__calc {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.vimeo-lightbox__calc-wrap {
  width: 100%;
  position: relative;
}

/* Cover */
.vimeo-lightbox[data-vimeo-update-size="cover"] .vimeo-lightbox__calc-wrap {
  height: 100%;
}

.vimeo-lightbox[data-vimeo-update-size="cover"] [data-vimeo-lightbox-player] {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

.vimeo-lightbox__player {
  pointer-events: auto;
  color: #efeeec;
  isolation: isolate;
  background-color: #131313;
  border-radius: 1em;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9) rotate(0.001deg) translateX(0);
}

.vimeo-lightbox[data-vimeo-activated="true"] .vimeo-lightbox__player {
  opacity: 1;
  visibility: visible;
  transform: scale(1) rotate(0.001deg) translateX(0);
}

.vimeo-lightbox__before {
  padding-top: 62.5%;
}

/* Dark BG */
.vimeo-lightbox__bg {
  pointer-events: auto;
  background-color: #131313;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  visibility: hidden;
}

.vimeo-lightbox[data-vimeo-activated="loading"] .vimeo-lightbox__bg,
.vimeo-lightbox[data-vimeo-activated="true"] .vimeo-lightbox__bg{
  opacity: 1;
  visibility: visible;
}

/* Close Button */
.vimeo-lightbox__close {
  z-index: 600;
  pointer-events: auto;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  display: flex;
  position: absolute;
  top: 2.5vw;
  right: 2.5vw;
  transition: all 0.5s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  visibility: hidden;
}

.vimeo-lightbox[data-vimeo-activated="true"] .vimeo-lightbox__close {
  opacity: 1;
  visibility: visible;
}

.vimeo-lightbox__close-bar {
  background-color: currentColor;
  width: 1em;
  height: .125em;
  position: absolute;
  transform: rotate(-45deg);
}

.vimeo-lightbox__close-bar.is--duplicate {
  transform: rotate(45deg);
}

.vimeo-lightbox__iframe {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
}

/* Loading */
.vimeo-lightbox__loading {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  display: flex;
  position: absolute;
  opacity: 0;
}

.vimeo-lightbox__loading-svg {
  color: #ff4c24;
  width: 6em;
}

.vimeo-lightbox__loading-svg {
  color: #ff4c24;
  width: 6em;
}

.vimeo-lightbox[data-vimeo-playing="true"] .vimeo-lightbox__loading {
  opacity: 1;
}

.vimeo-lightbox[data-vimeo-playing="true"][data-vimeo-loaded="true"] .vimeo-lightbox__loading {
  opacity: 0;
}

/* Dark (Overlay) */
.vimeo-lightbox__dark {
  opacity: .5;
  pointer-events: none;
  background-color: #131313;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  position: absolute;
}

.vimeo-lightbox[data-vimeo-playing="false"] .vimeo-lightbox__dark {
  opacity: 0.33;
}

.vimeo-lightbox[data-vimeo-activated="false"][data-vimeo-playing="false"] .vimeo-lightbox__dark {
  opacity: 0;
}

.vimeo-lightbox[data-vimeo-activated="true"][data-vimeo-loaded="true"] .vimeo-lightbox__dark {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .vimeo-lightbox[data-vimeo-hover="true"]:hover .vimeo-lightbox__dark {
    opacity: 0.33 !important;
  }
}

/* Placeholder */
.vimeo-lightbox__placeholder {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  display: block;
  position: absolute;
}

.vimeo-lightbox[data-vimeo-loaded="true"] .vimeo-lightbox__placeholder {
  opacity: 0;
}

.vimeo-lightbox__play, .vimeo-lightbox__pause {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.vimeo-lightbox__btn {
  -webkit-backdrop-filter: blur(1em);
  backdrop-filter: blur(1em);
  background-color: #64646433;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 6em;
  height: 6em;
  transition: opacity .3s linear;
  display: flex;
  position: relative;
}

.vimeo-lightbox__btn-play-svg {
  width: 40%;
}

.vimeo-lightbox__btn-pause-svg {
  width: 50%;
}

/* Pause */
.vimeo-lightbox .vimeo-lightbox__pause {
  display: none;
}

.vimeo-lightbox[data-vimeo-playing="true"] .vimeo-lightbox__pause {
  display: flex;
}

.vimeo-lightbox .vimeo-lightbox__pause .vimeo-lightbox__btn {
  opacity: 0;
}

.vimeo-lightbox[data-vimeo-activated="true"][data-vimeo-playing="false"] .vimeo-lightbox__pause .vimeo-lightbox__btn,
.vimeo-lightbox[data-vimeo-activated="true"][data-vimeo-hover="true"]:hover .vimeo-lightbox__pause .vimeo-lightbox__btn {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .vimeo-lightbox[data-vimeo-activated="true"][data-vimeo-playing="true"] .vimeo-lightbox__pause .vimeo-lightbox__btn {
    opacity: 0 !important;
  }
}

/* Play */
.vimeo-lightbox[data-vimeo-playing="true"] .vimeo-lightbox__play {
  opacity: 0;
}

/* Interface - Variables */
.vimeo-lightbox {
  --timeline-rounded-corners: 1.5em;
  --timeline-dot-height: 0.75em;
  --timeline-dot-color: #FF4C24;
  --progress-bg: rgba(239, 238, 236, 0.2);
  --progress-fill-bg: #FF4C24;
  --progress-height: 0.2em;
}

.vimeo-lightbox__interface {
  pointer-events: none;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: min(2em, 4vw);
  transition-property: opacity;
  transition-duration: .3s;
  transition-timing-function: linear;
  display: flex;
  position: absolute;
  opacity: 0;
}

.vimeo-lightbox[data-vimeo-activated="false"][data-vimeo-playing="false"] .vimeo-lightbox__interface {
  opacity: 1;
}

.vimeo-lightbox .vimeo-lightbox__interface * {
  pointer-events: all; /* Make children of div clickable by user */
}

.vimeo-lightbox[data-vimeo-activated="true"][data-vimeo-playing="false"] .vimeo-lightbox__interface,
.vimeo-lightbox[data-vimeo-activated="true"][data-vimeo-hover="true"]:hover .vimeo-lightbox__interface {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .vimeo-lightbox[data-vimeo-activated="true"][data-vimeo-playing="true"] .vimeo-lightbox__interface {
    opacity: 0 !important;
  }
}

.vimeo-lightbox__interface-bottom {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

/* Interface - Timeline */
.vimeo-lightbox__timeline {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  height: 1.5em;
  display: flex;
  position: relative;
}

.vimeo-lightbox__timeline-input {
  pointer-events: auto;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-color: #0000;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.vimeo-lightbox__timeline-progress {
  vertical-align: top;
  -webkit-appearance: none;
  appearance: none;
  height: var(--progress-height);
  border-radius: var(--timeline-rounded-corners);
  color: var(--progress-fill-bg);
  background-color: #0000;
  border: none;
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  overflow: hidden;
}

.vimeo-lightbox progress::-webkit-progress-bar {
  border-radius: var(--timeline-rounded-corners);
  background-color: var(--progress-bg);
  box-shadow: 0;
}

.vimeo-lightbox progress::-webkit-progress-value {
  background: var(--progress-fill-bg);
}

.vimeo-lightbox progress::-moz-progress-bar{
  border-radius: var(--timeline-rounded-corners);
  background: var(--progress-fill-bg);
  box-shadow: 0;
}

.vimeo-lightbox progress::-ms-fill {
  border-radius: var(--timeline-rounded-corners);
}

/* Interface - Range */
.vimeo-lightbox [type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
 
.vimeo-lightbox [type="range"]:focus {
  outline: none;
}
 
.vimeo-lightbox [type="range"]::-ms-track {
  width: 100%;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

.vimeo-lightbox [type="range"]::-webkit-slider-runnable-track{
  width: 100%;
  height: var(--progress-height);
  cursor: pointer;
  background-color: var(--progress-bg);
  border-radius: var(--timeline-rounded-corners);
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

.vimeo-lightbox [type="range"]::-webkit-slider-thumb {
  box-shadow: 0;
  height: var(--timeline-dot-height);
  width: var(--timeline-dot-height);
  border-radius: var(--timeline-rounded-corners);
  background-color: var(--timeline-dot-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: calc((var(--progress-height) / 2) - (var(--timeline-dot-height) / 2));
}

.vimeo-lightbox [type="range"]::-webkit-slider-runnable-track,
.vimeo-lightbox [type="range"]:focus::-webkit-slider-runnable-track {
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

.vimeo-lightbox [type="range"]::-moz-range-track {
  width: 100%;
  height: var(--progress-height);
  cursor: pointer;
  background: var(--progress-bg);
  border-radius: 0;
  border: 0;
  border-radius: var(--timeline-rounded-corners);
  overflow: hidden;
  opacity: 1 !important;
}

.vimeo-lightbox [type="range"]::-moz-range-thumb {
  box-shadow: 0;
  border: 0;
  height: var(--timeline-dot-height);
  width: var(--timeline-dot-height);
  border-radius: var(--timeline-rounded-corners);
  background: var(--timeline-dot-color);
  cursor: pointer;
  box-shadow: 0;
}

/* Interface - Duration */
.vimeo-lightbox__duration {
  flex-shrink: 0;
  width: 2.25em;
}

.vimeo-lightbox__duration-span {
  text-align: center;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  display: block;
}

/* Interface - Mute */
.vimeo-lightbox__mute {
  cursor: pointer;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  position: relative;
}

.vimeo-lightbox__volume-up-svg {
  width: 100%;
  position: absolute;
}

.vimeo-lightbox__volume-mute-svg {
  width: 100%;
  position: absolute;
}

.vimeo-lightbox .vimeo-lightbox__mute svg:nth-child(2),
.vimeo-lightbox[data-vimeo-muted="true"] .vimeo-lightbox__mute svg:nth-child(1) {
  display: none;
}

.vimeo-lightbox .vimeo-lightbox__mute svg:nth-child(1),
.vimeo-lightbox[data-vimeo-muted="true"] .vimeo-lightbox__mute svg:nth-child(2) {
  display: block;
}

/* Interface - Fullscreen */
.vimeo-lightbox__fullscreen {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  position: relative;
}

.vimeo-lightbox__fullscreen-scale-svg {
  width: 100%;
  position: absolute;
}

.vimeo-lightbox__fullscreen-shrink-svg {
  width: 100%;
  position: absolute;
}

.vimeo-lightbox .vimeo-lightbox__fullscreen svg:nth-child(2),
.vimeo-lightbox[data-vimeo-fullscreen="true"] .vimeo-lightbox__fullscreen svg:nth-child(1) {
  display: none;
}

.vimeo-lightbox .vimeo-lightbox__fullscreen svg:nth-child(1),
.vimeo-lightbox[data-vimeo-fullscreen="true"] .vimeo-lightbox__fullscreen svg:nth-child(2) {
  display: block;
}

Step 2: Add custom Javascript

Step 2: Add Javascript

Step 3: Add Javascript

Javascript

Copy

function initVimeoLightboxAdvanced() {
  // Single lightbox container
  const lightbox = document.querySelector('[data-vimeo-lightbox-init]');
  if (!lightbox) return;

  // Open & close buttons
  const openButtons  = document.querySelectorAll('[data-vimeo-lightbox-control="open"]');
  const closeButtons = document.querySelectorAll('[data-vimeo-lightbox-control="close"]');

  // Core elements inside lightbox
  const iframe          = lightbox.querySelector('iframe');
  const placeholder     = lightbox.querySelector('.vimeo-lightbox__placeholder');
  const calcEl          = lightbox.querySelector('.vimeo-lightbox__calc');
  const wrapEl          = lightbox.querySelector('.vimeo-lightbox__calc-wrap');
  const playerContainer = lightbox.querySelector('[data-vimeo-lightbox-player]');

  // State
  let player = null;
  let currentVideoID = null;
  let videoAspectRatio = null;
  let globalMuted = lightbox.getAttribute('data-vimeo-muted') === 'true';
  const isTouch = ('ontouchstart' in window) || navigator.maxTouchPoints > 0;
  const playedOnce = new Set();  // track first play on touch

  // Format time (seconds → "m:ss")
  function formatTime(s) {
    const m   = Math.floor(s / 60);
    const sec = Math.floor(s % 60).toString().padStart(2, '0');
    return `${m}:${sec}`;
  }

  // Clamp wrap height
  function clampWrapSize(ar) {
    const w = calcEl.offsetWidth;
    const h = calcEl.offsetHeight;
    wrapEl.style.maxWidth = Math.min(w, h / ar) + 'px';
  }

  // Adjust sizing in "cover" mode
  function adjustCoverSizing() {
    if (!videoAspectRatio) return;
    const cH = playerContainer.offsetHeight;
    const cW = playerContainer.offsetWidth;
    const r  = cH / cW;
    const wEl = lightbox.querySelector('.vimeo-lightbox__iframe');
    if (r > videoAspectRatio) {
      wEl.style.width  = (r / videoAspectRatio * 100) + '%';
      wEl.style.height = '100%';
    } else {
      wEl.style.height = (videoAspectRatio / r * 100) + '%';
      wEl.style.width  = '100%';
    }
  }

  // Close & pause lightbox
  function closeLightbox() {
    lightbox.setAttribute('data-vimeo-activated', 'false');
    if (player) {
      player.pause();
      lightbox.setAttribute('data-vimeo-playing', 'false');
    }
  }

  // Wire Escape key & close buttons
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape') closeLightbox();
  });
  closeButtons.forEach(btn => btn.addEventListener('click', closeLightbox));

  // Setup Vimeo Player event handlers
  function setupPlayerEvents() {
    // Hide placeholder when playback starts
    player.on('play', () => {
      lightbox.setAttribute('data-vimeo-loaded', 'true');
    });
    // Close on video end
    player.on('ended', closeLightbox);

    // Duration UI
    const durEl = lightbox.querySelector('[data-vimeo-duration]');
    player.getDuration().then(d => {
      if (durEl) durEl.textContent = formatTime(d);
      lightbox.querySelectorAll('[data-vimeo-control="timeline"],progress')
        .forEach(el => el.max = d);
    });

    // Timeline & progress updates
    const tl = lightbox.querySelector('[data-vimeo-control="timeline"]');
    const pr = lightbox.querySelector('progress');
    player.on('timeupdate', data => {
      if (tl) tl.value = data.seconds;
      if (pr) pr.value = data.seconds;
      if (durEl) durEl.textContent = formatTime(Math.trunc(data.seconds));
    });
    if (tl) {
      ['input','change'].forEach(evt =>
        tl.addEventListener(evt, e => {
          const v = e.target.value;
          player.setCurrentTime(v);
          if (pr) pr.value = v;
        })
      );
    }

    // Hover → hide controls after a timeout
    let hoverTimer;
    playerContainer.addEventListener('mousemove', () => {
      lightbox.setAttribute('data-vimeo-hover', 'true');
      clearTimeout(hoverTimer);
      hoverTimer = setTimeout(() => {
        lightbox.setAttribute('data-vimeo-hover', 'false');
      }, 3000);
    });

    // Fullscreen toggle on player container
    const fsBtn = lightbox.querySelector('[data-vimeo-control="fullscreen"]');
    if (fsBtn) {
      const isFS = () => document.fullscreenElement || document.webkitFullscreenElement;
      if (!(document.fullscreenEnabled || document.webkitFullscreenEnabled)) {
        fsBtn.style.display = 'none';
      }
      fsBtn.addEventListener('click', () => {
        if (isFS()) {
          lightbox.setAttribute('data-vimeo-fullscreen', 'false');
          (document.exitFullscreen || document.webkitExitFullscreen).call(document);
        } else {
          lightbox.setAttribute('data-vimeo-fullscreen', 'true');
          (playerContainer.requestFullscreen || playerContainer.webkitRequestFullscreen)
            .call(playerContainer);
        }
      });
      ['fullscreenchange','webkitfullscreenchange'].forEach(evt =>
        document.addEventListener(evt, () =>
          lightbox.setAttribute('data-vimeo-fullscreen', isFS() ? 'true' : 'false')
      ));
    }
  }

  // Run sizing logic
  async function runSizing() {
    const mode = lightbox.getAttribute('data-vimeo-update-size');
    const w    = await player.getVideoWidth();
    const h    = await player.getVideoHeight();
    const ar   = h / w;
    const bef  = lightbox.querySelector('.vimeo-lightbox__before');

    if (mode === 'true') {
      if (bef) bef.style.paddingTop = (ar * 100) + '%';
      clampWrapSize(ar);
    } else if (mode === 'cover') {
      videoAspectRatio = ar;
      if (bef) bef.style.paddingTop = '0%';
      adjustCoverSizing();
    } else {
      clampWrapSize(ar);
    }
  }

  // Re-run sizing on viewport resize
  window.addEventListener('resize', () => {
    if (player) runSizing();
  });

  // Open or switch video
  async function openLightbox(id, placeholderBtn) {
    // Enter loading state immediately
    lightbox.setAttribute('data-vimeo-activated', 'loading');
    lightbox.setAttribute('data-vimeo-loaded',    'false');

    // If switching videos, just unload the old one (keep lightbox visible)
    if (player && id !== currentVideoID) {
      player.pause();
      await player.unload();
      lightbox.setAttribute('data-vimeo-playing', 'false');
      currentVideoID = null;
    }

    // Update placeholder image attributes
    if (placeholderBtn) {
      ['src','srcset','sizes','alt','width'].forEach(attr => {
        const val = placeholderBtn.getAttribute(attr);
        if (val != null) placeholder.setAttribute(attr, val);
      });
    }

    // First‑time init or load new video
    if (!player) {
      iframe.src = `https://player.vimeo.com/video/${id}?api=1&background=1&autoplay=0&loop=0&muted=0`;
      player = new Vimeo.Player(iframe);
      setupPlayerEvents();
      currentVideoID = id;
      await runSizing();
    } else if (id !== currentVideoID) {
      currentVideoID = id;
      await player.loadVideo(id);
      await runSizing();
    }

    // Now sizing is ready — show lightbox
    lightbox.setAttribute('data-vimeo-activated', 'true');

    // Autoplay logic
    if (!isTouch) {
      // Desktop: set volume then play
      player.setVolume(globalMuted ? 0 : 1).then(() => {
        lightbox.setAttribute('data-vimeo-playing', 'true');
        setTimeout(() => player.play(), 50);
      });
    } else if (playedOnce.has(currentVideoID)) {
      // Touch & already played once → play immediately with sound
      player.setVolume(globalMuted ? 0 : 1).then(() => {
        lightbox.setAttribute('data-vimeo-playing', 'true');
        player.play();
      });
    }
  }

  // Internal controls
  lightbox.querySelector('[data-vimeo-control="play"]').addEventListener('click', () => {
    if (isTouch) {
      if (!playedOnce.has(currentVideoID)) {
        // First touch: muted play + delayed unmute
        player.setVolume(0).then(() => {
          lightbox.setAttribute('data-vimeo-playing', 'true');
          player.play();
          if (!globalMuted) {
            setTimeout(() => {
              player.setVolume(1);
              lightbox.setAttribute('data-vimeo-muted', 'false');
            }, 100);
          }
          playedOnce.add(currentVideoID);
        });
      } else {
        // Next touches: play immediately with sound
        player.setVolume(globalMuted ? 0 : 1).then(() => {
          lightbox.setAttribute('data-vimeo-playing', 'true');
          player.play();
        });
      }
    } else {
      // Desktop: set volume then play
      player.setVolume(globalMuted ? 0 : 1).then(() => {
        lightbox.setAttribute('data-vimeo-playing', 'true');
        setTimeout(() => player.play(), 50);
      });
    }
  });

  lightbox.querySelector('[data-vimeo-control="pause"]').addEventListener('click', () => {
    player.pause();
    lightbox.setAttribute('data-vimeo-playing', 'false');
  });

  lightbox.querySelector('[data-vimeo-control="mute"]').addEventListener('click', () => {
    globalMuted = !globalMuted;
    player.setVolume(globalMuted ? 0 : 1).then(() =>
      lightbox.setAttribute('data-vimeo-muted', globalMuted ? 'true' : 'false')
    );
  });

  // Wire up open buttons
  openButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      const vid = btn.getAttribute('data-vimeo-lightbox-id');
      const img = btn.querySelector('[data-vimeo-lightbox-placeholder]');
      openLightbox(vid, img);
    });
  });
}

// Initialize Vimeo Lightbox (Advanced)
document.addEventListener('DOMContentLoaded', function() {
  initVimeoLightboxAdvanced();
});

Step 3: Add custom CSS

Step 2: Add custom CSS

CSS

Copy

.vimeo-lightbox__player {
  transition: all 0.3s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9) rotate(0.001deg) translateX(0);
}

.vimeo-lightbox[data-vimeo-activated="true"] .vimeo-lightbox__player {
  opacity: 1;
  visibility: visible;
  transform: scale(1) rotate(0.001deg) translateX(0);
}

/* Dark BG */
.vimeo-lightbox__bg {
  transition: all 0.3s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  visibility: hidden;
}

.vimeo-lightbox[data-vimeo-activated="loading"] .vimeo-lightbox__bg,
.vimeo-lightbox[data-vimeo-activated="true"] .vimeo-lightbox__bg{
  opacity: 1;
  visibility: visible;
}

/* Close Button */
.vimeo-lightbox__close {
  transition: all 0.5s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  visibility: hidden;
}

.vimeo-lightbox[data-vimeo-activated="true"] .vimeo-lightbox__close {
  opacity: 1;
  visibility: visible;
}

/* Cover */
.vimeo-lightbox[data-vimeo-update-size="cover"] .vimeo-lightbox__calc-wrap {
  height: 100%;
}

.vimeo-lightbox[data-vimeo-update-size="cover"] [data-vimeo-lightbox-player] {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

/* Placeholder */
.vimeo-lightbox[data-vimeo-loaded="true"] .vimeo-lightbox__placeholder {
  opacity: 0;
}

/* Dark (Overlay) */
.vimeo-lightbox[data-vimeo-playing="false"] .vimeo-lightbox__dark {
  opacity: 0.33;
}

.vimeo-lightbox[data-vimeo-activated="false"][data-vimeo-playing="false"] .vimeo-lightbox__dark {
  opacity: 0;
}

.vimeo-lightbox[data-vimeo-activated="true"][data-vimeo-loaded="true"] .vimeo-lightbox__dark {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .vimeo-lightbox[data-vimeo-hover="true"]:hover .vimeo-lightbox__dark {
    opacity: 0.33 !important;
  }
}

/* Pause */
.vimeo-lightbox .vimeo-lightbox__pause {
  display: none;
}

.vimeo-lightbox[data-vimeo-playing="true"] .vimeo-lightbox__pause {
  display: flex;
}

.vimeo-lightbox .vimeo-lightbox__pause .vimeo-lightbox__btn {
  opacity: 0;
}

.vimeo-lightbox[data-vimeo-activated="true"][data-vimeo-playing="false"] .vimeo-lightbox__pause .vimeo-lightbox__btn,
.vimeo-lightbox[data-vimeo-activated="true"][data-vimeo-hover="true"]:hover .vimeo-lightbox__pause .vimeo-lightbox__btn {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .vimeo-lightbox[data-vimeo-activated="true"][data-vimeo-playing="true"] .vimeo-lightbox__pause .vimeo-lightbox__btn {
    opacity: 0 !important;
  }
}

/* Play */
.vimeo-lightbox[data-vimeo-playing="true"] .vimeo-lightbox__play {
  opacity: 0;
}

/* Loading */
.vimeo-lightbox .vimeo-lightbox__loading {
  opacity: 0;
}

.vimeo-lightbox[data-vimeo-playing="true"] .vimeo-lightbox__loading {
  opacity: 1;
}

.vimeo-lightbox[data-vimeo-playing="true"][data-vimeo-loaded="true"] .vimeo-lightbox__loading {
  opacity: 0;
}

/* Interface */
.vimeo-lightbox .vimeo-lightbox__interface {
  opacity: 0;
}

.vimeo-lightbox[data-vimeo-activated="false"][data-vimeo-playing="false"] .vimeo-lightbox__interface {
  opacity: 1;
}

.vimeo-lightbox .vimeo-lightbox__interface * {
  pointer-events: all; /* Make children of div clickable by user */
}

.vimeo-lightbox[data-vimeo-activated="true"][data-vimeo-playing="false"] .vimeo-lightbox__interface,
.vimeo-lightbox[data-vimeo-activated="true"][data-vimeo-hover="true"]:hover .vimeo-lightbox__interface {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .vimeo-lightbox[data-vimeo-activated="true"][data-vimeo-playing="true"] .vimeo-lightbox__interface {
    opacity: 0 !important;
  }
}

/* Interface - Variables */
.vimeo-lightbox {
  --timeline-rounded-corners: 1.5em;
  --timeline-dot-height: 0.75em;
  --timeline-dot-color: #FF4C24;
  --progress-bg: rgba(239, 238, 236, 0.2);
  --progress-fill-bg: #FF4C24;
  --progress-height: 0.2em;
}

/* Interface - Timeline */
.vimeo-lightbox progress::-webkit-progress-bar {
  border-radius: var(--timeline-rounded-corners);
  background-color: var(--progress-bg);
  box-shadow: 0;
}

.vimeo-lightbox progress::-webkit-progress-value {
  background: var(--progress-fill-bg);
}

.vimeo-lightbox progress::-moz-progress-bar{
  border-radius: var(--timeline-rounded-corners);
  background: var(--progress-fill-bg);
  box-shadow: 0;
}

.vimeo-lightbox progress::-ms-fill {
  border-radius: var(--timeline-rounded-corners);
}

/* Interface - Range */
.vimeo-lightbox [type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
 
.vimeo-lightbox [type="range"]:focus {
  outline: none;
}
 
.vimeo-lightbox [type="range"]::-ms-track {
  width: 100%;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

.vimeo-lightbox [type="range"]::-webkit-slider-runnable-track{
  width: 100%;
  height: var(--progress-height);
  cursor: pointer;
  background-color: var(--progress-bg);
  border-radius: var(--timeline-rounded-corners);
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

.vimeo-lightbox [type="range"]::-webkit-slider-thumb {
  box-shadow: 0;
  height: var(--timeline-dot-height);
  width: var(--timeline-dot-height);
  border-radius: var(--timeline-rounded-corners);
  background-color: var(--timeline-dot-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: calc((var(--progress-height) / 2) - (var(--timeline-dot-height) / 2));
}

.vimeo-lightbox [type="range"]::-webkit-slider-runnable-track,
.vimeo-lightbox [type="range"]:focus::-webkit-slider-runnable-track {
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

.vimeo-lightbox [type="range"]::-moz-range-track {
  width: 100%;
  height: var(--progress-height);
  cursor: pointer;
  background: var(--progress-bg);
  border-radius: 0;
  border: 0;
  border-radius: var(--timeline-rounded-corners);
  overflow: hidden;
  opacity: 1 !important;
}

.vimeo-lightbox [type="range"]::-moz-range-thumb {
  box-shadow: 0;
  border: 0;
  height: var(--timeline-dot-height);
  width: var(--timeline-dot-height);
  border-radius: var(--timeline-rounded-corners);
  background: var(--timeline-dot-color);
  cursor: pointer;
  box-shadow: 0;
}

/* Interface - Mute */
.vimeo-lightbox .vimeo-lightbox__mute svg:nth-child(2),
.vimeo-lightbox[data-vimeo-muted="true"] .vimeo-lightbox__mute svg:nth-child(1) {
  display: none;
}

.vimeo-lightbox .vimeo-lightbox__mute svg:nth-child(1),
.vimeo-lightbox[data-vimeo-muted="true"] .vimeo-lightbox__mute svg:nth-child(2) {
  display: block;
}

/* Interface - Fullscreen */
.vimeo-lightbox .vimeo-lightbox__fullscreen svg:nth-child(2),
.vimeo-lightbox[data-vimeo-fullscreen="true"] .vimeo-lightbox__fullscreen svg:nth-child(1) {
  display: none;
}

.vimeo-lightbox .vimeo-lightbox__fullscreen svg:nth-child(1),
.vimeo-lightbox[data-vimeo-fullscreen="true"] .vimeo-lightbox__fullscreen svg:nth-child(2) {
  display: block;
}

Implementation

Open Vimeo Lightbox

Add [data-vimeo-lightbox-control="open"] to any element. When the user clicks this element that will open the lightbox.
To load the correct Vimeo video, locate the numeric ID in the Vimeo URL (e.g., 1019191082). Ensure the video is allowed to be embedded under its Vimeo settings. Add this ID to the attribute [data-vimeo-lightbox-id=“1019191082”].
To show a placeholder image when loading the Vimeo video add a <img> element with the attr [data-vimeo-lightbox-placeholder] attached as a child of the [data-vimeo-lightbox-control="open"]. This image can be hidden with display: none; and will only be used as data.

<button data-vimeo-lightbox-control="open" data-vimeo-lightbox-id="1019191082">
  <img data-vimeo-lightbox-placeholder="" src="image.jpg" alt="">
  <span>Open Video</span>
</button>

Close Vimeo Lightbox

Add [data-vimeo-lightbox-control="close"] to any element. When the user clicks this element it will close the lightbox and pause the video. Clicking the esc button on your keyboard will also close the lightbox.

<button data-vimeo-lightbox-control="close">Close Video</button>

Update Size (Aspect Ratio)

When the attribute [data-vimeo-update-size=“true”] is set to true, the player will retrieve the video’s dimensions and update the .vimeo-lightbox__before element’s padding-top to maintain the correct aspect ratio in percentages. Example: padding-top: 56.25%; = 16:9 ratio.

When the attribute [data-vimeo-update-size="cover"] is set the video player will cover the parent element. Make sure to put position: relative; on the parent.

Muted

Set the attribute [data-vimeo-muted=“true”] to start the video muted. The user can toggle the mute state by clicking an element with the attribute [data-vimeo-control=“mute”].

More information

Activated

When the lightbox is active it will set the [data-vimeo-activated="loading"], this will already show the dark background via CSS. When the information of the video is fetched it will change to [data-vimeo-activated="true"] and show the video player via CSS.

Play/Pause

The elements with the attributes [data-vimeo-control=“play”] and [data-vimeo-control=“pause”] allow the user to play or pause the video. These actions update the [data-vimeo-playing="false"] attribute from “false” to “true” or vice versa. You can use this attribute to control the visibility of the player interface during playback.

Fullscreen

The user can enter fullscreen mode by clicking an element with the attribute [data-vimeo-control=“fullscreen”]. If fullscreen is not supported on a device or browser (e.g., some mobile devices), the fullscreen button will not be displayed.

Loading

While the video is loading, the element with the class .vimeo-lightbox__loading is visible. Once the video finishes loading, the attribute [data-vimeo-loaded=“true”] is set to true, allowing you to hide the loading indicator.

Placeholder

Before the video loads, a placeholder image with the class .vimeo-lightbox__placeholder is displayed. When the attribute [data-vimeo-loaded=“true”] is true, the placeholder is hidden.

Duration

On load, the attribute [data-vimeo-duration] displays the total duration of the video. Once the video starts playing, it updates to show the current elapsed time.

Timeline

The timeline consists of an <input type="range"> element and a <progress> element. These components allow the user to control the video timeline. Dragging or clicking the timeline enables the user to skip to a specific point in the video.

Hover Player

When the user hovers over the video while it is playing but does not move the mouse for three seconds, the attribute [data-vimeo-hover=“false”] is set. This can be used to automatically hide the interface even if the mouse remains over the video player.

Live Preview

Resource Details

Last updated
April 22, 2025
Type
The Vault
Category
Video & Audio
Need help?
Join Slack

Custom

Vimeo

Lightbox

Modal

Pop-up

Iframe

Player

Sound

Fullscreen

Javascript

Original source

Dennis Snellenberg

Custom Vimeo Lightbox (Advanced)

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Open Vimeo Lightbox

Close Vimeo Lightbox

Update Size (Aspect Ratio)

Muted

More information

Activated

Play/Pause

Fullscreen

Loading

Placeholder

Duration

Timeline

Hover Player

Creator Credits

Welcome to the Vault 👋

GSAP Discount Code

Osmo Slack Community

Need help?

Custom Vimeo Lightbox (Advanced)

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Open Vimeo Lightbox

Close Vimeo Lightbox

Update Size (Aspect Ratio)

Muted

More information

Activated

Play/Pause

Fullscreen

Loading

Placeholder

Duration

Timeline

Hover Player

Creator Credits