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?

Yes, you can build a custom video lightbox in Webflow that plays a Vimeo video when an external button is clicked. It requires using Webflow interactions along with custom embed settings to control autoplay behavior.

​

1. Prepare the Vimeo Embed Link

​

• Vimeo supports autoplay via URL parameters.
• Modify the URL to include ?autoplay=1 at the end (e.g., https://player.vimeo.com/video/123456789?autoplay=1).
• Add additional parameters as needed—like &title=0&byline=0&portrait=0 to hide UI elements.

​

2. Create the Video Lightbox Structure in Webflow

​

• Create a “Lightbox Wrapper”: A div that will have position: fixed, full width/height, and a high z-index.
• Add a “Close” button inside the wrapper.
• Inside the Lightbox, add a div (e.g., "Video Container") where the Vimeo embed will sit.

​

3. Add the Vimeo Embed Using an Embed Element

​

• Drag a Webflow Embed element into the Video Container.
• Paste the Vimeo <iframe> code with autoplay=1.
• Use the loading="lazy" attribute for performance.
• Set the Lightbox Wrapper’s initial display to none in Webflow.

​

4. Create the External Trigger Button

​

• Place a button outside the lightbox anywhere on your page.
• Give it a clear class name like “Open Video Button.”

​

5. Make the Button Trigger the Lightbox

​

• Use Webflow Interactions:
• Select the Open Video Button, go to Interactions → Element trigger → Mouse click (tap).
• Set it to change the Lightbox Wrapper's Display to flex (or block) and adjust opacity if needed.

​

6. Ensure Video Autoplays When Lightbox Opens

​

• Because the embed already has ?autoplay=1, the video will begin playback once the iframe is loaded into view.
• If the embed is always in the DOM but hidden, the autoplay won’t work until the video iframe is reloaded dynamically. In that case:
• Consider using custom JavaScript to inject the Vimeo embed when the button is clicked. If you're comfortable with code, let me know and I can walk you through this.

​

7. Add Close Functionality

​

• Create another interaction on the Close button.
• Set it to hide the Lightbox Wrapper (display: none).
• Optionally, add an interaction to reset the iframe so the video stops playing (e.g., clearing and resetting the src attribute).

​

Summary

​

To autoplay a Vimeo video via an external button in Webflow, use a custom lightbox structure, embed the video with ?autoplay=1, and control visibility with interactions. For more advanced control (e.g., iframe injection), custom code may be required.