How can I create a button that plays a background video in Webflow, similar to the split video section on a specific website?

To create a button that plays a background video in Webflow—like a split video section where the video is hidden or paused until a user clicks a button—you’ll need to configure layout settings, background video setup, and a custom interaction.

1. Add and Configure the Background Video

• Drag a Background Video component from the Add panel into your desired Section.
• Upload your MP4 video (must be under 30MB).
• Set initial display: In the Style panel, set the video to full width/height and position it absolutely to fill the section.
• Turn off Autoplay and Loop by clicking the video element — while Webflow doesn't natively expose these toggles, your workaround is using custom interactions to control visibility instead (see step 3).

2. Add a Play Button

• Drag a Button or Div Block into your section and style it as your Play Button.
• Place it above the video element in the layer order so it’s always visible.
• You may want to give this element a label like “Play Video” or use a Play icon.

3. Set Up Interaction to Reveal/Play the Video

• Go to the Interactions panel (click the lightning bolt icon).
• Select the Play Button, then choose Element Trigger → Mouse Click (Tap).
• Choose Start an Animation → New Timed Animation.

Inside the animation:

• Step 1: Show the video
• Add an action to the Background Video element: Set Display → Block (if it was hidden).
• Add another action: Set Opacity to 100% with a short transition (e.g., 0.3s).
• Step 2: Optionally hide the Play Button
• Add an action to Play Button: Set Opacity to 0, followed by Display → None.

Webflow’s background video element always autoplays and loops by default when visible. Since you can't programmatically “play” it on click, you simulate this by hiding the video by default and revealing it on click.

4. Hide the Background Video by Default

• Select the Background Video and give it an initial state (via interactions or styles) of:
• Display: none
• Opacity: 0%
• This ensures the video isn’t shown or played until the user initiates it.

5. Optional: Split Section Layout

• Use a 2-column layout (e.g., Grid or Flexbox) to mimic a “split” video section.
• Place content in one column and the video background (or overlay) in the other.
• Add z-index layers and positioning controls to make your text and button appear above the video as needed.

Summary

To create a button-triggered background video in Webflow, you (1) add a background video element, (2) hide it by default, (3) position a play button over it, and (4) use mouse click interactions to reveal the video, simulating a play effect. Since Webflow’s background videos autoplay on visibility, this workaround achieves the desired behavior.