How can I stop a Webflow Vimeo video from playing with a button other than the play button, close the video window when the close window button is pressed, and autoplay the video when the window opens?

You want to autoplay a Vimeo video when a modal opens, stop it when closed, and control this via buttons other than the native Vimeo controls. Webflow's native video element doesn't support full Vimeo API communication, so you must use an Embed element with Vimeo's player API and custom code.

​

1. Embed the Vimeo Video with Player API Enabled

​

• Use a Webflow Embed element, not the Video component, to embed the Vimeo iframe.
• Add the iframe with these important parameters:
• autoplay=1: triggers autoplay.
• muted=1: required by many browsers to autoplay.
• api=1: enables JavaScript control via Vimeo Player API.
• id: assign a unique ID to the iframe, like "vimeo-video".

​

Example embed code:

<iframe id="vimeo-video" src="https://player.vimeo.com/video/123456789?autoplay=1&muted=1&api=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

​

2. Load Vimeo Player API

​

• Add this script in your custom code (Page Settings or Site settings > Footer):

​

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

​

3. Add Custom Code to Control Playback with Buttons

​

• Use jQuery or vanilla JavaScript to control the Vimeo video in response to custom buttons (e.g., open/close modal).

​

Example script (place before closing </body> tag):

<script>
  var iframe = document.getElementById('vimeo-video');
  var player = new Vimeo.Player(iframe);

  // Play video when modal opens
  document.getElementById('open-button').addEventListener('click', function() {
    player.play();
  });

  // Pause video when modal closes
  document.getElementById('close-button').addEventListener('click', function() {
    player.pause();
  });
</script>

​

• Replace 'open-button' and 'close-button' with the actual IDs of your modal open and close triggers.

​

4. Set Up Modal Behavior in Webflow

​

• Create your modal using Webflow interactions or components.
• Ensure the modal container is hidden by default, shows when open, and hides on close.
• The open button should both show the modal and trigger the player.play() method.
• The close button should hide the modal and trigger player.pause().

​

Summary

​

To autoplay and stop a Vimeo video via non-native buttons in Webflow:

• Use an Embed element with autoplay=1, muted=1, and api=1 parameters.
• Load Vimeo’s Player API using a <script> tag.
• Use custom JavaScript to control play/pause on modal open and close buttons.
• Tie these events to Webflow’s modal visibility triggers for seamless UX.