How to add a background video in Webflow:
- Go to the Add Elements section in the left sidebar menu.
- Use the search bar or look under the Advanced section for Background Video.
- 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.
- Configure options and upload a video to use as background for this section.
- You will notice the video in a small player once uploaded. Close this menu.
- 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.
- On the right sidebar, under Position, locate the Position option.
- Change this to Absolute. This will fix the background element to its parent.
- Now that our background video is in the background, it still has no width.
- Go to the Size section in the right sidebar menu.
- Set Width to 100% for full width. Also consider modifying the height as required.
- 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.
- Locate the Background section at the bottom on the right sidebar menu and delete any existing backgrounds, gradients or images.
- You will notice your background video is now fully visible.
- Use the Webflow Preview to see your video play in the background on the live website.
