How to Add a Video Background in Divi

Apr 23, 2021 | Divi Tutorial | 0 comments

Nowadays Video backgrounds are a hugely popular website design trend.

Videos are a great way to share a story keep people on your website longer, engage them with your content and bring any site to life.

In this tutorial I will show you how to do it in Divi and customize it by adding a nice overlay. 

How to Add a Video Background in Divi


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.


How to Add a Video Background in Divi - Upload


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:

display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
z-index: 9;


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

How to Add a Video Background in Divi - Overlay

  • View your Divi Background Video in Action.




Submit a Comment

Your email address will not be published. Required fields are marked *

Hey there, I´m Cristina

I´m Cristina, engineer, curious, hipster and handcrafter. I Design feminine, modern and simply wordpress themes for female creative entrepreneur.


Ready to upgrade your own site? let's do it.

Check out some featured showcase sites

Divi WordPress Theme

Pin It on Pinterest

Share This
  • No products in the cart.