Streaming live at 10am (PST)

How to connect to vimeo api for embedded videos

Hi! I’m a bit stuck with trying to connect to vimeo api.
I have a cms template for showing each embedded vimeo videos. And each template pulls the video link from the cms to show videos . (video is a dynamic element).


What I’m trying to do is connect to the vimeo API so that I can track user’s video progression (if user has finished watching the video or not). So I added the script in the project settings -> custom code.
Then, I added this in
However, when I publish it and go on the page console, I find this

also when I try printing out the iframe like below:
var iframe = document.querySelector(‘iframe’);
console.log(iframe)
I get this

I think I might need to get the iframe src in the form of something like this below (from https://github.com/vimeo/player.js) but not sure how to get this.

would really appreciate any help!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hello,

If you want to use the Vimeo API I wouldn’t use the Vimeo component from Webflow. Instead, choose a custom embed so that you can control every aspect of your video. First step is to copy paste the Vimeo API script in your body custom code:

<!-- Vimeo player API -->
<script defer src="https://player.vimeo.com/api/player.js"></script>

Then create a custom code embed and copy the following HTML code inside. Of course that embed can be inside a CMS collection list and the id of the video could be pulled from a dynamic field.

<div class="ratio">
  <!-- 👉🏼 past vimeo video id -->
  <div class="vimeo" id="210599507"></div>
</div>

Then add some css rule to style your vimeo iframe:

.ratio {
  position: relative;
  width: 100%;
  padding-top: calc(16/9*100%);
  z-index: 1;
}

.vimeo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
}

Then you can use vimeo API method to initialize a vimeo instance. You can then call methods to display any alert message you like.

document.addEventListener("DOMContentLoaded", () => {
  initVimeo();
});

function initVimeo() {
  const vimeo = document.getElementsByClassName("vimeo")[0];
  // get vimeo id
  const vimeoId = (() => {
    return vimeo.getAttribute("id");
  })();
  
  // options
  const options = {
    id: vimeoId,
    autoplay: true,
    autopause: 0,
    loop: true,
    muted: true, // autoplay on mobile
    background: true, // remove all controls
    responsive: true, // experimental
    quality: "720p"
  };

  // player constructor initialisation
  const player = new Vimeo.Player(vimeo, options);

  player.loadVideo(vimeoId).then(function (id) {
    console.log(`video ${id} has loaded 🥳`);
  });

  player.on("play", (event) => {
    console.log("video is playing ❤️");
  });
} // end of initVimeo()

Here is a quick temporary codepen for you.
Hope that helps.

1 Like