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?
- Replace the Webflow Lightbox with a custom modal containing a Vimeo iframe using
autoplay=1&controls=0. - Trigger the modal via a Webflow interaction and include a close button that hides the modal and resets the video.
To autoplay a Vimeo video in a Webflow Lightbox while avoiding the double play button, you need to bypass the default Webflow Lightbox behavior and embed the video manually using custom interactions.
1. Use a Custom Embed Instead of Webflow Lightbox
- The Webflow Lightbox component introduces a second play button as it uses its own interface before loading the Vimeo iframe.
- Solution: Replace the Lightbox with a custom modal and embed a Vimeo iframe directly.
2. Set Up a Modal Popup for the Video
- Create a div block that acts as a modal and contains an Embed component with your Vimeo iframe.
- Style this modal to be hidden initially (
display: none) and positioned fixed to cover the entire screen.
3. Use Vimeo’s Autoplay and Hide Controls Parameters
In the Embed block, insert your Vimeo link with the appropriate query parameters:
autoplay=1– to autoplaybackground=1orcontrols=0– to hide the play buttonExample Vimeo embed URL:
https://player.vimeo.com/video/123456789?autoplay=1&muted=0&controls=0&loop=0Add
loading="lazy"andallow="autoplay"to ensure autoplay works, like this (inside the embed):<iframe src="https://player.vimeo.com/video/123456789?autoplay=1&controls=0" loading="lazy" allow="autoplay; fullscreen" allowfullscreen></iframe>
4. Trigger the Modal with a Custom Click Action
- Create a button or image that users will click to play the video.
- Use a Webflow interaction:
- On click: Show the modal (set
display: flexorblock) - This triggers the video iframe to load with autoplay.
5. Optional: Add a Close Button to Stop the Video
- Add a close icon inside the modal.
- Set a click interaction on the close icon to:
- Hide the modal
- Reset the video: To stop playback, replace the embed with a fresh one (e.g., using Webflow’s Embed "Replace Embed Code" interaction or via custom JavaScript to reset the iframe
src).
Summary
To autoplay a Vimeo video in Webflow without showing the second play button, avoid the default Lightbox and instead use a custom modal with a Vimeo iframe that includes autoplay=1&controls=0. This gives you full control and avoids duplicate UI elements.