Does anyone have experience building a custom video lightbox in Webflow that starts playing a Vimeo video when a button outside the lightbox is clicked?

You're looking to create a custom video lightbox in Webflow that starts playing a Vimeo video when an external button is clicked. Here's how you can achieve that using Webflow’s interactions and a little custom embed setup.

1. Set Up the Lightbox Structure

• Create a Div Block to serve as your video lightbox overlay. Set it to Fixed, full screen, and give it a high z-index.
• Inside the lightbox, add a Close Button and another Div Block that will serve as the video container.
• Inside the video container, add an Embed element (not a Webflow Lightbox) to hold the Vimeo iframe.

2. Prepare Your Vimeo Embed

• Get your Vimeo video ID and use the following iframe structure with autoplay enabled:
• src="https://player.vimeo.com/video/VIDEO_ID?autoplay=1&muted=1"
• Set additional parameters like title=0&byline=0&portrait=0&loop=0 as needed.
• Add loading="lazy" to improve performance.

3. Add the External Button

• Create a button elsewhere on your page that will trigger the lightbox (e.g., “Watch Video”).
• Give it a unique ID or class name so you can target it with an interaction.

4. Use Webflow Interactions to Trigger the Lightbox

• Go to the Interactions panel.
• Create a Mouse Click (Tap) trigger for the external button:
• Step 1: Set visibility of the lightbox to Display: Flex or Block and Opacity: 100% (use transitions if desired).
• Step 2: Insert the video iframe into the video container dynamically using a small extra script if needed (see next step).

5. Handle Vimeo Video Loading Properly

• To avoid the video auto-playing before the lightbox shows up, do not load the iframe on page load.
• Set the Embed code via custom code only when the button is clicked. Example in script:
• On click, set innerHTML of the video container with the Vimeo iframe src using autoplay=1.

6. Close the Lightbox

• Set an interaction on the Close Button:
• Step 1: Change visibility back to Display: None and Opacity: 0%.
• Step 2: Clear the innerHTML of the iframe container div to stop the video.

Summary

To build a custom Vimeo lightbox in Webflow with autoplay triggered by an external button: create a hidden overlay, use Webflow interactions to show it, and dynamically load the Vimeo iframe with autoplay when the button is clicked. This ensures the video starts at the correct time and avoids premature loading.