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

Adding a background video

  1. Open the Elements Panel
  2. Scroll to the Components section
  3. Grab a Background Video
  4. Drag it into your project.

As you drop the Background video on your canvas, you're prompted to upload a video.

 

To Upload a video:

  1. Click on Upload Video
  2. Select a video from your computer.
Webflow Background Video Settings
Supported video formats: webm, mp4, mov, ogg. The background video file must be smaller than 30MB.

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).

Once the settings window is open, click Replace Video to upload and transcode a new video.

Replacing a Background Video in Webflow

Styling the background video

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 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.

 
Background videos may not autoplay on touch devices due to mobile device constraints. On these devices, the background video styles pass down, but the video is going to display the first frame of the video as a still image.
 

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.