A Background video is a great way to grab attention, giving audioless continuous motion to the background of a particular section of content. In fact, a Background video behaves almost like a section, so you can put content right inside.

Webflow Background Video
Elements panel → components → background video

Adding a background video

Add a background video using Quick find (CMD/CTRL+E) or from the Elements panel → components. As you drop the Background video on your canvas, you'll be prompted to upload a video.

 

Next, upload a video from your computer.

Webflow Background Video Settings
Supported video formats
The background video component accepts video files smaller than 30MB with the following formats: webm, mp4, mov, ogg.
Video transcoding
After the video file is uploaded, it is transcoded to other video file types (mp4 & webm) for maximum browser support. While this is happening, you can keep working in the Designer.
Uploading a Background Video in Webflow

Previewing the background video

You can preview the video you just uploaded by:

  • Hovering over the video thumbnail in the background video settings
  • Clicking on the open in new tab icon next to the video file name to preview the video in a new tab
  • Clicking on preview in the top bar to see how the background video will appear in your design
 

Replacing the background video

To replace the Background Video, open the Background Video Settings by either double-clicking on the video or by going to the Settings Panel (Shortcut: D). You can also access the background video settings by selecting the element and pressing enter. Once the settings window is open, click Replace Video to upload and transcode a new video.

Replacing a Background Video in Webflow

Using the background video as a section

You can use a Background Video as a section. Just drop any content inside the background video. To center the content, change the display setting to flex.

 

Height of a background video on different breakpoints

Unlike a section, a Background video has to have a fixed height. By default, it’s 500px tall. You can add a custom height value to override this default value. By adjusting the height in the different device views, you make sure the background video is sized properly on each view.

 
Need to know
Background videos may not autoplay on touch devices if a site visitor has enabled data saver.

Background video overlay

You can add some contrast using a gradient or a solid color overlay on your background video. Choose your colors and change the opacity to adjust the visibility. The overlay will sit on top of the Background Video but beneath its content.