How To Add Background Video In Webflow

‍

How to add a background video in Webflow:

1. Go to the Add Elements section in the left sidebar menu.
2. Use the search bar or look under the Advanced section for Background Video.
3. Once you add this to your section. A pop-up menu will open allowing you to upload a video, configure a few settings, all of which can also be found on the right sidebar menu.
4. Configure options and upload a video to use as background for this section.
5. You will notice the video in a small player once uploaded. Close this menu.
6. You will now notice that this background element is taking up space in your section. To fix this, we will position it out of plane.
7. On the right sidebar, under Position, locate the Position option.
8. Change this to Absolute. This will fix the background element to its parent.
9. Now that our background video is in the background, it still has no width.
10. Go to the Size section in the right sidebar menu.
11. Set Width to 100% for full width. Also consider modifying the height as required.
12. Now that we have our background video, it is still not visible due to the section's own backgrounds. To change this, select the section.
13. Locate the Background section at the bottom on the right sidebar menu and delete any existing backgrounds, gradients or images.
14. You will notice your background video is now fully visible.
15. Use the Webflow Preview to see your video play in the background on the live website.