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 and Play Button, set video to hidden initially using opacity or display settings.
- Use Webflow Interactions to reveal and play the video on button click, and animate overlays or split effects for visual transitions.
To create a button that plays a background video in Webflow (like a split video reveal), you’ll need to structure your layout properly and use Webflow Interactions.
1. Add a Background Video Element
- Drag a Background Video component from the Add panel into your desired section.
- Upload your background video file (must be under 30 MB and in .mp4 format).
- Set the video’s position to Absolute – Full so it spans the full container or section.
- Set opacity to 0% or Display: None initially if you want the video hidden from the start.
2. Add a Play Button
- Drag a Button or Div Block into the same section.
- Style it as your Play Button, and optionally add a play icon.
- Position it over the background using Absolute positioning if necessary.
3. Create an Overlay (Optional)
- If you want a split or full-screen reveal over the video, add a Div Block overlay with a background color.
- Set it to Absolute – Full, and give it an animation to fade out or slide away when the video plays.
4. Use Interactions to Control Video Playback
- Select your Play Button, go to the Interactions panel, and create a Mouse Click (Tap) trigger.
- In the interaction:
- Step 1: Set the background video’s Display to Block and Opacity to 100% (if hidden).
- Step 2: Add a Start Video action targeting the background video element. (Webflow will autoplay it when it becomes visible)
- Optional: Animate the overlay to fade out, slide out, or reduce in width to create a split-video effect.
- Optional: Animate the Play Button itself to hide or fade out.
5. Refine the Split Video Reveal (if needed)
- For a split reveal, duplicate the section into two halves and place two synchronized videos.
- Animate each half to slide apart on button click using transform: move or width scale.
- Sync both halves using the same Interaction timeline.
Summary
Create a play button by adding a Background Video and a Button element, then use Webflow Interactions to show the video and play it on click. Use overlays and animation to mimic a split screen video reveal for a dynamic effect.