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?
- Use a custom modal and link instead of Webflow’s default Lightbox to gain control over Vimeo autoplay and interface elements.
- Embed the Vimeo iframe manually with parameters (
autoplay=1&muted=1&controls=0&background=1), and trigger the modal via Webflow interactions for play and close/reset functionality.
You're trying to get a lightbox in Webflow to autoplay a Vimeo video without displaying Vimeo’s second play button. Webflow’s native Lightbox wraps the video in a player that delays autoplay and shows Vimeo’s native play UI, but this can be avoided with a custom setup.
1. Use a Custom Link Instead of the Webflow Lightbox
- Avoid using the default Webflow Lightbox element for Vimeo autoplay, as it doesn't support autoplay or control over embedded parameters like hiding buttons.
- Instead, use a regular link or button with a modal or popup you create manually in Webflow.
2. Embed Vimeo with Correct Autoplay & UI Parameters
Use a Vimeo embed link as the video source with the following parameters:
autoplay=1: Plays automatically.
muted=1: Required for autoplay to work in most browsers.
background=1 or controls=0: Hides UI elements if desired.
Example Vimeo embed link:
https://player.vimeo.com/video/VIDEO_ID?autoplay=1&muted=1&controls=0&background=1
3. Add an Embed Element or Custom Modal
- Add a custom Div block to serve as your modal.
- Inside it, use a Webflow Embed component and place the Vimeo embed iframe using the link above.
- Style this modal to appear on click, then hide it by default using Webflow interactions.
4. Trigger the Video Modal with Interactions
- Create a click interaction on your trigger element (link or image).
- On click:
- Show the modal div (set display to block or flex).
- Optionally, you can add opacity transitions or animations for a smoother effect.
5. Close and Reset the Modal
- Add a close button inside the modal.
- The close interaction should:
- Hide the modal, and
- Reset the video (you can do this by setting the embed’s
iframe srcattribute back to empty and then resetting it with JavaScript or duplicate visibility logic in Webflow).
Summary
To autoplay Vimeo in a Webflow lightbox without a second play button, avoid the native Lightbox and instead use a custom modal with an embedded Vimeo iframe that includes autoplay=1&muted=1&controls=0&background=1. Trigger this modal with a click and use Webflow interactions to manage its visibility.