How to Add a Video Background in Divi

by | Divi Tutorial | 0 comments

How to Add a Video Background in Divi

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 integrate ConverKit with Divi Builder

How to integrate ConverKit with Divi Builder

In this tutorial I want to share you how to integrate Divi Builder with your Converkit account Building an email list is one of the most important things that can grow your business. This feature is basic to provide with information or promote products or services to...

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...

0 Comments

Submit a Comment

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

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

Pin It on Pinterest

Shares
Share This
Cart
  • No products in the cart.