How to Play & Pause Videos in Webflow Popup Modal

This guide will walk you through adding a Vimeo video modal to your Webflow site with play/pause functionality. We'll focus on a straightforward, effective approach that works well within Webflow's design system.

Step 1: Essential IDs

Based on the provided JavaScript, we need to set up the following IDs:

1. vimeo-player: for the iframe that will contain the Vimeo video
2. Hero-video-popup: for the modal div that will contain the video player
3. video-play: for the element that triggers the video to play
4. close-link: for the element that closes the video modal

Step 2: Set Up Your Webflow Elements

1. Create a button or clickable element:
   • Give it the ID: video-play
   • This will trigger your video modal
2. Create a div for your modal:
   • Give it the ID: Hero-video-popup
   • Style it however you like it.
3. Inside the modal div, add the Vimeo iframe:
   • Give it the ID: vimeo-player
   • Leave the src attribute empty for now
4. Add a close button inside the modal:
   • Give it the ID: close-link
   • Style it as you prefer (e.g., an "X" in the top-right corner)

Step 2: Add the Vimeo Iframe

Inside the embed, add this HTML code:

<iframe id="vimeo-player" src="https://player.vimeo.com/video/YOUR_VIDEO_ID" width="100%" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

‍

Replace YOUR_VIDEO_ID with your actual Vimeo video ID.

‍

Step 3: Add Required Scripts

In your project settings (Page Settings > Custom Code > body), add these script tags:

<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

‍

Step 4: Add JavaScript for Functionality

Add this JavaScript to your project settings (Page Settings > Custom Code > body)

<script>
  $(document).ready(function() {
    var iframe = $('#vimeo-player')[0];
    var player = new Vimeo.Player(iframe);
    var originalSrc = 'https://player.vimeo.com/video/938857071?h=7329063288';

    // When the element with class .video-play is clicked
    $('.video-play').click(function(e) {
      e.preventDefault();
      $('#vimeo-player').attr('src', originalSrc); // Set the src to ensure it reloads
      $('#Hero-video-popup').fadeIn(); // Adjust the popup show method as per your Webflow setup
      player.play().then(function() {
        console.log('The video is playing');
      }).catch(function(error) {
        console.error('Error playing the video:', error);
      });
    });

    // When the element with class .close-link is clicked
    $('.close-link').click(function(e) {
      e.preventDefault();
      player.pause().then(function() {
        console.log('The video is paused');
      }).catch(function(error) {
        console.error('Error pausing the video:', error);
      });
      $('#vimeo-player').attr('src', ''); // Clear the src to stop the video
      $('#Hero-video-popup').fadeOut(); // Adjust the popup hide method as per your Webflow setup
    });
  });
</script>

‍

Make sure to replace YOUR_VIDEO_ID with your actual Vimeo video ID.

‍

Step 5: Test Your Implementation

1. Publish your Webflow site.
2. Click the button with the video-play class. The modal should appear and the video should start playing.
3. Click the element with the close-link class. The modal should close and the video should stop.

Troubleshooting

• If the video doesn't play, double-check your Vimeo video ID in both the iframe src and the JavaScript originalSrc variable.
• Ensure all custom code is pasted correctly in the Project Settings.
• Check the browser console for any JavaScript errors.

That's it! You now have a functional Vimeo video modal in your Webflow site with play and pause functionality.