Jane Pro – How to add a video background

Step 1: Look for your perfect Video Background

You can upload your own video or use a Free Stock Video Website like Pexels and look for a video that covers your business needs.

In Pexels, all videos are free for personal and commercial use.

You can look for your videos by topic and choose position and size.

How to Add a Video Background in Divi - Pexels

Step 2: Upload Your Background Video

 

  • Once You´ve download your lovely video Open the Divi Section Options.
  • Upload Your Background Video, This is where we can upload our video. (Note that it is recommended that you upload the video in MP4 format to ensure maximum browser compatibility.)
  • Save Your Background Video Choice.
  • Add Some Content to that section, For example I´ve added a Call To Action.

 

 

Step 3: Customize adding a lovely overlay

 

By default it’s not possible to add overlay effect to a section or any other Divi modules that contain a video background.

You´ll find a code like this:

content:"";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #222;
opacity: 0.5;
z-index: 1;

 

Next, and the following code under the Section >  Advanced tab  > Custom CSS >  Before Element field:

 

Related Articles