Custom Vimeo Player (Basic)

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-player" data-vimeo-player-init="" data-vimeo-video-id="1019191082" data-vimeo-update-size="true" data-vimeo-playing="false" data-vimeo-activated="false" data-vimeo-loaded="false" data-vimeo-muted="false">
  <div class="vimeo-player__before"></div>
  <iframe src="" width="640" height="360" frameborder="0" allowfullscreen="true" allow="autoplay; encrypted-media" class="vimeo-player__iframe"></iframe>
  <img src="https://cdn.prod.website-files.com/677ea292defbe50b73f19c6d/677ecca60bf9ddd8ed1be256_vimeo-player-basic-placeholder.avif" loading="eager" alt="" class="vimeo-player__placeholder">
  <div class="vimeo-player__dark"></div>
  <div class="vimeo-player__play" data-vimeo-control="play">
    <div class="vimeo-player__btn">
      <svg class="vimeo-player__btn-play-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none"><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 class="vimeo-player__pause" data-vimeo-control="pause">
    <div class="vimeo-player__btn">
      <svg class="vimeo-player__btn-pause-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none"><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-player__loading">
    <svg class="vimeo-player__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>

HTML structure is not required for this resource.

Step 2: Add CSS

CSS

Copy

.vimeo-player {
  pointer-events: auto;
  color: #efeeec;
  isolation: isolate;
  background-color: #131313;
  border-radius: 1em;
  justify-content: center;
  align-items: center;
  width: min(60em, 100vw - 1.5em);
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translateX(0);
}

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

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

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

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

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

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

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

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

@media (hover: hover) and (pointer: fine) {
  .vimeo-player:hover .vimeo-player__dark {
    opacity: 0.33 !important;
  }
}

/* Play/Pause */
.vimeo-player__play, .vimeo-player__pause {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

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

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

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

/* Pause */
.vimeo-player .vimeo-player__pause {
  display: none;
}

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

.vimeo-player .vimeo-player__pause .vimeo-player__btn {
  opacity: 0;
}

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

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

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

/* Loading */

.vimeo-player__loading-svg {
  width: 9em;
}

.vimeo-player__loading {
  pointer-events: none;
  color: #00ADEF;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  display: flex;
  position: absolute;
  opacity: 0;
}

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

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

Step 2: Add custom Javascript

Step 2: Add Javascript

Step 3: Add Javascript

Javascript

Copy

function initVimeoPlayer() {
  // Select all elements that have [data-vimeo-player-init]
  const vimeoPlayers = document.querySelectorAll('[data-vimeo-player-init]');

  vimeoPlayers.forEach(function(vimeoElement, index) {
    
    // Add Vimeo URL ID to the iframe [src]
    // Looks like: https://player.vimeo.com/video/1019191082
    const vimeoVideoID = vimeoElement.getAttribute('data-vimeo-video-id');
    if (!vimeoVideoID) return;
    const vimeoVideoURL = `https://player.vimeo.com/video/${vimeoVideoID}?api=1&background=1&autoplay=0&loop=0&muted=1`;
    vimeoElement.querySelector('iframe').setAttribute('src', vimeoVideoURL);
    
    // Assign an ID to each element
    const videoIndexID = 'vimeo-player-index-' + index;
    vimeoElement.setAttribute('id', videoIndexID);

    const iframeID = vimeoElement.id;
    const player = new Vimeo.Player(iframeID);

    // Update Aspect Ratio if [data-vimeo-update-size="true"]
    if (vimeoElement.getAttribute('data-vimeo-update-size') === 'true') {
      player.getVideoWidth().then(function(width) {
        player.getVideoHeight().then(function(height) {
          const beforeEl = vimeoElement.querySelector('.vimeo-player__before');
          if (beforeEl) {
            beforeEl.style.paddingTop = (height / width) * 100 + '%';
          }
        });
      });
    }

    // Loaded
    player.on('play', function() {
      vimeoElement.setAttribute('data-vimeo-loaded', 'true');
    });

    // Function: Play Video
    function vimeoPlayerPlay() {
      vimeoElement.setAttribute('data-vimeo-activated', 'true');
      vimeoElement.setAttribute('data-vimeo-playing', 'true');
      player.play();
    }

    // Function: Pause Video
    function vimeoPlayerPause() {
      vimeoElement.setAttribute('data-vimeo-playing', 'false');
      player.pause();
    }

    // Click: Play
    const playBtn = vimeoElement.querySelector('[data-vimeo-control="play"]');
    if (playBtn) {
      playBtn.addEventListener('click', function() {
        // Always set volume to 0 first to avoid pop
        player.setVolume(0);
        vimeoPlayerPlay();

        // If muted attribute is 'true', keep volume at 0, else 1
        if (vimeoElement.getAttribute('data-vimeo-muted') === 'true') {
          player.setVolume(0);
        } else {
          player.setVolume(1);
        }
      });
    }

    // Click: Pause
    const pauseBtn = vimeoElement.querySelector('[data-vimeo-control="pause"]');
    if (pauseBtn) {
      pauseBtn.addEventListener('click', function() {
        vimeoPlayerPause();
      });
    }

    // Video Ended
    function vimeoOnEnd() {
      vimeoElement.setAttribute('data-vimeo-activated', 'false');
      vimeoElement.setAttribute('data-vimeo-playing', 'false');
      player.unload();
    }
    player.on('ended', vimeoOnEnd);

  });
}

// Initialize Vimeo Player
document.addEventListener('DOMContentLoaded', function() {
  initVimeoPlayer();
});

Step 3: Add custom CSS

Step 2: Add custom CSS

CSS

Copy

/* Placeholder */
.vimeo-player[data-vimeo-activated="true"][data-vimeo-loaded="true"] .vimeo-player__placeholder {
  opacity: 0;
}

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

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

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

@media (hover: hover) and (pointer: fine) {
  .vimeo-player:hover .vimeo-player__dark {
    opacity: 0.33 !important;
  }
}

/* Pause */
.vimeo-player .vimeo-player__pause {
  display: none;
}

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

.vimeo-player .vimeo-player__pause .vimeo-player__btn {
  opacity: 0;
}

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

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

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

/* Loading */
.vimeo-player .vimeo-player__loading {
  opacity: 0;
}

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

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

Implementation

Vimeo Video ID

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-video-id=“1019191082”].

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-player__before element’s padding-top to maintain the correct aspect ratio in percentages. Example: padding-top: 56.25%; = 16:9 ratio.

Muted

Set the attribute [data-vimeo-muted=“true”] to start the video muted.

More information

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.

Loading

While the video is loading, the element with the class .vimeo-player__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-player__placeholder is displayed. When the attribute [data-vimeo-loaded=“true”] is true, the placeholder is hidden.

Advanced Player

Need more functionality? We also have a Custom Vimeo Player (Advanced)

Live Preview

Resource Details

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

Custom

Vimeo

Autoplay

Player

Iframe

Sound

Javascript

Basic

Original source

Dennis Snellenberg

Custom Vimeo Player (Basic)

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Vimeo Video ID

Update Size (Aspect Ratio)

Muted

More information

Play/Pause

Loading

Placeholder

Advanced Player

Creator Credits

Welcome to the Vault 👋

GSAP Discount Code

Osmo Slack Community

Need help?

Custom Vimeo Player (Basic)

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Vimeo Video ID

Update Size (Aspect Ratio)

Muted

More information

Play/Pause

Loading

Placeholder

Advanced Player

Creator Credits