Social
Traffic
Call Us
+1 (855) 576-0406
Email
admin@socialtraffic.ca
5.0 Rating
300+ reviews
How To
1 Minute

How to Play & Pause Videos in Webflow Popup Modal

Learn how to implement the "Pause on Close" feature for Vimeo video modals in Webflow. Boost user engagement with this simple, effective technique.

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.

Related Posts

Try it For Free

Qualified Appointments

In less than 45 Min.

In less than 45 minutes, you can start receiving exclusive, qualified appointments delivered straight to your calendar.

No Commitment Required
Trusted by more than 100+ businesses