How can I create a button that plays a background video in Webflow, similar to the split video section on a specific website?
TL;DR
- Add a Background Video element in a hidden div and mute it for autoplay.
- Create a play button and use Webflow interactions to reveal the video (by adjusting opacity or display) and optionally animate a split-section layout.
To create a button that plays a background video on click in Webflow, similar to a split-section video reveal, you'll need to use a combination of Webflow interactions and video element settings.
1. Add the Background Video Element
- Drag a Section into the Webflow canvas.
- Inside the section, add a Div Block and give it a class like
video-wrapper. - Inside that div, add a Background Video element (from the Add panel).
- Upload your MP4 video. Webflow will generate the necessary formats.
2. Set Initial Video Styling and Playback Settings
- Set the visibility of the video to hidden or its opacity to 0.
- Alternatively, set the video display to none if you want it completely removed on load.
- In the Background Video settings, mute the video (required for autoplay) and enable loop if needed.
- By default, background videos auto-play. But to simulate a pause/play effect, you'll control their visibility instead.
3. Create Your Play Button
- Add a Button element into the same section (outside or overlaying the video).
- Style it as needed (e.g., circular play button with an icon).
- Give it a clear class like
play-btn.
4. Create a Show Video Interaction
- Select the Play Button, go to the Interactions (⚡️) panel.
- Choose Mouse click (tap) > Start an Animation.
- Click + Timed Animation, name it e.g.,
Show Video. - Add the following actions to the animation:
- Change display of
video-wrappertoblockor Set Opacity from 0% to 100% over 0.3s. - Optionally, hide or fade out the play button at the same time.
5. Optional: Split Video Section Effect
- To mimic a "split video section" (e.g., half image, half video), use two column layout inside your section:
- Left Column: static image or text.
- Right Column:
video-wrapperwith background video. - Use a width animation on
video-wrapperto expand it from 0% to, say, 50% or 100% width on click.
Summary
To replicate a play-on-click background video effect in Webflow, use a Background Video element with visibility controlled by interactions. Combine this with layout animations like width transitions if you're mimicking a split-screen reveal.