How do I add a background video in Webflow?

Upload a short silent clip

A background video sits behind a section. It has no audio. Webflow's video article says the video element cannot play a file you upload. That element needs a link from a host such as YouTube or Vimeo. The background video is the element that accepts the file.

Open the Add panel, then Components, and drag Background video onto the canvas. You can also press Command + E on Mac or Control + E on Windows, search for background video, and add it. Webflow asks you to upload as soon as the element lands.

The file must be smaller than 30 MB. The formats are webm, mp4, mov, and ogg. Keep spaces and special characters out of the file name. Hyphens are allowed. After the upload, Webflow transcodes the file to mp4 and webm so more browsers can play it. You can keep working in the Designer while that runs.

Example: the homepage hero should show a quiet shot of the studio, with a heading and a button on top. Export a short mp4 under 30 MB, name it studio-hero.mp4, and upload that file. Do not paste a YouTube link into this element. That link belongs in a video element.

Leave loop, autoplay, and the pause control on

Three settings start on: Loop video, Autoplay video, and Include play/pause button. Open them by double-clicking the element, by selecting it and pressing Enter, or from the Settings panel.

Loop repeats the clip. Autoplay starts it when the page loads. The play and pause button lets a visitor stop that motion. Webflow's article ties this to the need for a pause control when something moves on its own for more than five seconds. Leave the button on if loop or autoplay is on.

Visitors who have Prefers reduced motion turned on in their system will not get the autoplay. The video pauses for them even if you hide the button. If the button is off, those visitors cannot start the clip at all. Videos added before June 2022 do not get the button automatically. Select the element, open the settings, and check Include play/pause button.

The button sits on the video. If a heading covers it, select the button and set a z-index higher than 0 so it stays in front. If you replace the default icons, add alt text. Webflow's example is Play video on the pause state and Pause video on the play state. An SVG icon needs a width and height in pixels. A percentage size can shrink that icon to nothing.

Put the heading inside the video

You can drop content inside the background video and use it as a section. Place a heading, a short sentence, and a button in the element. Style them the same way you style content in any other section.

If the type is hard to read, add a solid color or a gradient overlay. That overlay sits on the video and under the heading and button. Lower the opacity until the picture still shows and the text is clear.

On a phone, autoplay may not start if the visitor has data saver or low power mode on. Do not rely on the motion to explain the offer. The heading and the button should still make sense when the video is paused or has not started.

Replace the file, then publish

To swap the clip, open Background video settings and click Replace video. You can preview before you publish. Hover the thumbnail in the settings, open the file in a new tab from the icon next to the name, or use the Preview icon in the top bar.

Preview is not the live site. Publish, then open the live URL on a desktop and on a phone. Confirm the heading is readable, the button can be clicked, and the play and pause control works. In the browser, turn on a reduced motion preference and reload. The clip should not keep running on its own, and the button should still start it.

A file that fails to upload is usually over 30 MB, in another format, or named with a space. Fix the file and upload again. If you wanted sound, captions, or a YouTube start time, use a video element or a YouTube element instead of a background video.