How can I solve the issue of autoplay not working on a Vimeo video within a video modal in Webflow?

Autoplay issues with embedded Vimeo videos in a Webflow modal typically happen due to missing URL parameters, browser restrictions, or the way modals are triggered.

1. Use the Correct Vimeo Embed Parameters

• Make sure the Vimeo embed URL includes autoplay=1 and muted=1.
• Example:
  https://player.vimeo.com/video/123456789?autoplay=1&muted=1
• Browsers restrict autoplay of videos with sound, so muting is mandatory for autoplay to work.

2. Ensure the Video Embed is Dynamic via Interaction

• If the Vimeo iframe is already in the modal and you use autoplay=1, the video may start playing in the background, not upon modal open.
• Instead, use Webflow Interactions to dynamically insert the Vimeo iframe when the modal is opened.
• Do this by:
• Adding an Embed element inside your modal with a placeholder (e.g., <div id="vimeo-container"></div>).
• Using a Webflow “Open Modal” interaction to set that container’s HTML embed content with a script (set innerHTML) containing the correct Vimeo embed URL.

3. Use display: none Carefully

• If your modal uses display: none, some browsers block autoplay because the iframe is loaded before it’s visible.
• Use Webflow Interactions to delay loading the video iframe until after the modal becomes visible (e.g., after the open animation completes).

4. Prevent Residual Playback

• To stop the video when the modal closes, make sure to:
• Use an interaction to clear the Vimeo iframe (e.g., set the container’s inner HTML to empty).
• Alternatively, replace the embed every time the modal is opened.

Summary

To ensure Vimeo autoplay works in a Webflow modal, dynamically load the video with autoplay=1&muted=1 after the modal opens. Don’t preload the iframe hidden, and always mute the video to comply with browser autoplay rules.