How to add a video background to a container

Here is how you can add a video as a background on any project in just a few minutes.

Upload video and thumbnail
Add video element to the container
Video options
Styling the video background



For this project, you will need a downloaded video and a thumbnail image created beforehand.

Upload video and thumbnail

Go to the Left panel, to the Assets Manager section, and upload both the video and thumbnail files.

Add video element to the container

From the Assets manager, drag the video file to the container you want it to become a background. Make sure to drag it to the top of the container.

To replace the placeholder with the thumbnail while selecting the video, go to the Assets manager, hover above the thumbnail, and click on the "Replace" icon.

Video options

Select the video and go to the Right panel and the Video section.

Enable the** autoPlay, muted**, and loop properties.

Styling the video background

Select the video element and go to the Right panel to the Size section.

Click the dropdown icon to expand the size options and delete the current width and height.

Change the size:

Add a Min W of 100% and a Min H of 1000px, or however much is needed to cover the entire section.

The Min H (minimum height) can have different values for other media queries to make the video more responsive.

Change the position:

In the Right panel, go to the Position section, remove the existing values, and add 0px to the Top.

Move video to background:

You need to bring the other elements to the foreground to move the video to the background.

Select the other elements in the container, go to the Right panel, scroll down, and click on the Z-index to bring them to the foreground.

This will make the video appear as the background.

If your background appears in other sections, select the container that holds the video, and in the Right panel, go to the Advanced tab and add the overflow: hidden; property. This will prevent your video from appearing above other sections.

Updated on: 04/04/2023