How To Add Background Video In Webflow

Quick summary

Adding a background video in Webflow requires inserting the Background Video element, positioning it absolutely, and setting its width to 100% so it fills the parent section. Once the section's own background is cleared, the video becomes fully visible and can be previewed using Webflow's Preview mode.

Steps

1. Go to the Add Elements section in the left sidebar menu.
2. Use the search bar or look under the Advanced section to find the Background Video element.
3. Add the Background Video element to your section — a pop-up menu will open letting you upload a video and configure settings, which are also accessible from the right sidebar.
4. Configure options and upload a video to use as the background for the section.
5. Once uploaded, view the video in the small player preview, then close the menu.
6. Notice that the background element is taking up space in the section — prepare to position it out of plane.
7. On the right sidebar under Position, locate the Position option.
8. Change the Position setting to Absolute to fix the background element to its parent section.
9. Observe that the background video is now behind the content but still has no width applied.
10. Go to the Size section in the right sidebar menu.
11. Set Width to 100% for full width, and adjust the height as needed.
12. Select the section itself, since the video may still be hidden behind the section's own backgrounds.
13. In the Background section at the bottom of the right sidebar, delete any existing backgrounds, gradients, or images.
14. Confirm that the background video is now fully visible across the section.
15. Use the Webflow Preview mode to see the video playing as a background on the live website.