How can I make a lightbox link play a video immediately after being clicked in Webflow, without displaying the second play button from the embedded Vimeo video?

To auto-play a Vimeo video in a Lightbox and avoid showing a second Vimeo play button, you need to modify how the video is embedded within Webflow's Lightbox component.

​

1. Use a Custom Lightbox Instead of Webflow’s Native Lightbox

​

• Webflow’s native Lightbox element doesn't support modifying the embedded Vimeo URL parameters like autoplay=1 or controls=0.
• To bypass this limitation, you need to build a custom lightbox interaction using a div block, an embed component for the video, and Webflow interactions.

​

2. Prepare the Custom Lightbox Elements

​

• Create a Trigger Element: This could be a thumbnail or any clickable element.
• Add a Lightbox Modal: Create a div block (e.g., lightbox-wrapper) that's initially hidden.
• Inside it, add:
• A background overlay.
• A close button.
• A div block for the video embed.

​

3. Embed the Vimeo Video with Autoplay and Hidden Controls

​

• Use a Webflow Embed component and insert the Vimeo iframe with these URL parameters:
• autoplay=1: Starts the video automatically.
• background=1 or controls=0: Hides video player controls.
• muted=1: Required by most browsers for auto-play to work.
• Typical Vimeo embed URL:
• https://player.vimeo.com/video/VIDEO_ID?autoplay=1&muted=1&controls=0&loop=0&title=0&byline=0&portrait=0

​

Replace `VIDEOID` with your actual Vimeo video ID._

​

4. Set Up Interactions in Webflow

​

• On click of the trigger element:
• Set the lightbox-wrapper to display as flex or block.
• Use a Show/Hide interaction to fade it in.
• This will show the video and autoplay immediately.
• On click of the close button:
• Use an interaction to hide the lightbox-wrapper.
• Optionally use jQuery (via an embed) to reset the iframe src to stop playback.

​

5. Optional: Reset Video on Close

​

• In your page’s Before </body> custom code section, add this script:

​

<script>
  $('.close-button').click(function() {
    var iframe = $('.vimeo-embed iframe');
    iframe.attr('src', iframe.attr('src'));
  });
</script>

​

• This reloads the video and stops playback when the modal is closed.

​

Summary

​

Webflow’s native Lightbox doesn't allow autoplay or hiding the second Vimeo play button. To achieve full control, build a custom lightbox using a div modal and embed the Vimeo video with autoplay=1, muted=1, and controls=0 in the URL. Use interactions to show/hide the lightbox and optionally reset playback on close.