How to add a background video in Webflow?

Background videos add visual impact to hero sections and landing pages. Webflow supports background videos through a dedicated element and through custom embeds. Both approaches have different tradeoffs.

Using the background video element

Webflow provides a built-in Background Video element in the Add panel.

1. Open the Add panel (left sidebar, + icon).
2. Find Background Video under the Media section.
3. Drag it onto the canvas, typically inside a Section.
4. In the Settings panel, click the video area to upload an MP4 file or link to an external URL.
5. Optionally add an overlay image (poster frame) that displays before the video loads.

Supported formats

• MP4 (H.264) — The only reliably supported format. Webflow recommends MP4 for background videos.

• Keep the file under 30 MB. Large files cause long load times and poor mobile performance.

Element settings

• Auto-play — Enabled by default and cannot be turned off (background videos always auto-play).

• Loop — Enabled by default.

• Muted — Enabled by default. Most browsers block auto-play of unmuted video, so this is required.

• Poster image — A static image shown while the video loads. Always set one to avoid a blank section.

Using a YouTube or Vimeo embed

You can embed a YouTube or Vimeo video as a background using an Embed element with custom HTML/CSS. This avoids uploading a large file but gives you less control over playback behavior and adds a dependency on the video platform.

1. Add an Embed element to your layout.
2. Paste an iframe with autoplay=1&mute=1&loop=1&controls=0 parameters.
3. Use CSS to position it absolutely within the container and set pointer-events: none.

Note that embedded videos from third-party platforms may show UI overlays, branding, or ads depending on the account tier.

Best practices

Keep it short. Background videos should be 10–20 seconds. Longer videos add unnecessary weight.

Compress aggressively. Use a tool like HandBrake to encode at a low bitrate (2–5 Mbps) with H.264. Resolution of 720p is usually sufficient for a background — it plays behind content and does not need to be pixel-sharp.

Provide a poster image. The poster image is the first thing users see. Make it a high-quality frame from the video so the transition to playback feels seamless.

Consider mobile performance. Background videos are heavy. On mobile connections, they can significantly slow page load. You can hide the video on mobile and show a static image instead using per-breakpoint visibility settings.

Always mute. Unmuted auto-play is blocked by all major browsers. Background videos are visual atmosphere, not a playback experience.

Adding content on top

The Background Video element acts as a container. You can add text, buttons, and other elements inside it just like any other Section or Div Block. Use relative positioning for the content and ensure sufficient contrast against the video — a semi-transparent dark overlay behind the text helps readability.