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’);
I get this

I think I might need to get the iframe src in the form of something like this below (from 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)


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=""></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>

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", () => {

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.