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:

content:"";
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.

 

 

You may also like..

How to combine multiple fonts on one line in Divi

How to combine multiple fonts on one line in Divi

Usually it's not a good idea to combine multiple fonts, or font sizes on one text line but there are exceptions where they look good. In this post I´ll show you how to get this result that you can see on my WordPress theme, Meryl. Step 1: Add Text module Add a text...

How to give a Free Download to your Subscribers in Divi

How to give a Free Download to your Subscribers in Divi

This tutorial I walk through the process to give a Free Download to your Subscribers in Divi. Do you want to grow your email list with a lead magnet? Lead magnet is a Free eEbook, PDF Guide, Course, Template, ...  in exchange for your visitors’ email addresses is a...

0 Comments

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.

CATEGORIES

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

Check out some featured showcase sites

Divi WordPress Theme

Pin It on Pinterest

Shares
Share This
Cart
  • No products in the cart.