How to Add a Background Video in Webflow

In this tutorial, Sandro, co-founder of Gemeos Webflow agency, shows you how to add a background video to a section in Webflow.

1. Use the native Background Video element

In the Designer, drag the Background Video element from the Add Elements panel. Place it in your hero section or in whichever Div you want. In Settings, upload your video file (MP4 recommended, under 10 MB for performance).

2. Configure the video settings

In the Background Video element settings, turn on Autoplay, Loop, and Muted (required for autoplay in all browsers). Turn off controls if you don't want a visible playback bar.

3. Add a fallback image

In Settings, upload a Poster Image: it shows while the video loads and on mobile (where background videos are often disabled by default). Choose a frame that clearly represents your video.

4. Layer your content on top

Place your content (headline, CTA) inside a Div with position: absolute or a higher z-index than the video. Add a semi-transparent overlay if the video is too bright to keep the text readable.

Conclusion

Webflow background video works natively, no code needed. For performance: improve LCP.