How to Add YouTube Video Background in Divi Theme

Are you looking to add a YouTube video as a background in the Divi theme pages? If yes, you landed on the right spot. In this guide, I will try to guide you on how you can easily insert any YouTube video as background in Divi landing pages.

Adding a YouTube video background not only helps in improving the website’s SEO but also helps in building more user engagement with your site. Hence, it is a best practice to embed video backgrounds on the site’s landing pages.

Let’s dive into the process of adding a YouTube video background.

Benefits Of Adding YouTube Video Background To Divi Theme Pages

There are multiple benefits of adding a YouTube video background to Divi landing pages. Here, I have listed a few of them:

  • It boosts user experience that helps you enhance your website’s trustworthiness.
  • By adding a YouTube video background, you can improve the SEO of your website.
  • It can also improve your site’s rankings as Google gives priority to pages that have multimedia, like images and videos.
  • You can increase traffic to your website by adding YouTube videos.
  • You can also add CTAs with YouTube video backgrounds that help you grow your revenue.

How to Add YouTube Video Background in Divi Theme

This method of inserting a YouTube video background in Divi theme pages doesn’t require any plugin. Divi offers in-built modules that allow you to add video backgrounds to pages.

Here are the simple steps to follow:

Step 1: Create a New Page (or Open an Existing)

divi background video, divi video background, divi video background on mobile, divi youtube video background
Create a New Page (or Open an Existing)

The first step is to create a new page, or you can also open any existing page where you want to add a YouTube video background. To do this, simply go to your WordPress dashboard and navigate “Pages > Add New” as shown in the above image.

Step 2: Enable Divi Builder

divi background video, divi video background, divi video background on mobile, divi youtube video background
Enable Divi Builder

In this step, you have to enable the Divi builder for the page. The Divi builder is default disabled when you create a new page. So, you just need to click on the option “Use The Divi Builder” as seen in the above classic editor image.

If you are using Gutenberg editor, here is how you will see the option to enable Divi builder:

divi background video, divi video background, divi video background on mobile, divi youtube video background
Enable Divi Builder

Step 3: Build From Scratch

Once you enable the Divi editor, it will take a few seconds (depending on your internet speed), and you will be redirected to the Divi Visual Builder.

divi background video, divi video background, divi video background on mobile, divi youtube video background
Build From Scratch

It is recommended to start from scratch instead of choosing any pre-built template, especially if you are a beginner. So, all you need to do is to select “Build From Scratch”, similar to the above image.

Step 4: Insert Code Module

divi background video, divi video background, divi video background on mobile, divi youtube video background
Select Row Module

In the next step, you need to insert the code module. Before inserting a module, you need to insert a Row, as shown in the above image.

Here, you need to simply click on the single row under the “New Row” tab.

divi background video, divi video background, divi video background on mobile, divi youtube video background
Insert Code Module

Now, you have to insert a code module by searching for “Code” under “New Module” and selecting the module.

Step 5: Generate YouTube Video Code

Now, to insert your YouTube video in the background, you need to get the embed code of the video from YouTube.

Here are a few steps you can follow:

divi background video, divi video background, divi video background on mobile, divi youtube video background
Generate YouTube Video Code

Open YouTube and search for the video that you want to add to Divi. Next, open the video and click on the “Share” button, as shown in the above image.

divi background video, divi video background, divi video background on mobile, divi youtube video background
Copy YouTube Video Code

Next, you will get a few options to share the video. Here, you need to click on the “Embed” option and copy the HTML code as shown in the above image.

Step 6: Add YouTube Video Code

Once you get the YouTube video embed code, the next step is to add the code to the Code module that you have added to your page in step 4.

divi background video, divi video background, divi video background on mobile, divi youtube video background
Paste YouTube Video Code

Simply paste the code under the code section as shown in the above image. You can also make some design changes to your YouTube video, like changing the size, adding borders, filters, and a few more modifications.

Now, to make the YouTube video as the page background, you need to perform a few steps as mentioned below:

divi background video, divi video background, divi video background on mobile, divi youtube video background
Make Row Settings

Start by navigating to “Design > Sizing” and change the size of Width and Max Width as mentioned in the below image.

divi background video, divi video background, divi video background on mobile, divi youtube video background
Set Row Padding

After that, navigate to “Design > Spacing” and change the padding to “0px”.

Step 7: Add Content

In the above steps, you have successfully added a YouTube video background to your page. Now, you can add any content you want to the landing page.

For example, here I am adding the “Contact Form” to the same page where the video is added as a background.

divi background video, divi video background, divi video background on mobile, divi youtube video background
Add Contact Module in Divi

Simply add a module named “Contact Form” as you can see in the above image. But, to make the contact form visible, you need to change a few settings as mentioned below:

divi background video, divi video background, divi video background on mobile, divi youtube video background
Set Contact Module Position

First of all, you need to navigate to “Advanced > Position” and change it to Absolute. After that, place the cursor at the center and change the value of the “Z Index” to “19”.

divi background video, divi video background, divi video background on mobile, divi youtube video background
Set Contact Module Size

Next, you need to change the width of the contact form by navigating to the “Design > Sizing” and changing it to “50%”.

Step 8: Check The Preview

divi background video, divi video background, divi video background on mobile, divi youtube video background
Preview Post/Page in Divi

In this step, you can see the preview of the page before publishing it live on the website. Under the Visual Builder, you can see the live preview without closing the page.

divi background video, divi video background, divi video background on mobile, divi youtube video background
Publish Changes

Once you are satisfied with the page, you can publish it by clicking on the three dots and “Publish”.

Final Words

So, finally, we have successfully added a YouTube video background to the Divi theme pages. You can follow the above easy steps in order to embed any YouTube video you want.

I hope this guide helped you. Still, if you face any issues, you can ask your questions in the comments section below.

Sunny Kumar

Number of posts: 154

Hi, I'm Sunny Kumar, a passionate tech enthusiast and a blogger from New Delhi, India. With a degree in IT from IIT-D and expertise in SEO, Cloud Computing, Telecom & Networking, and CEH, I specialize in various technical fields, including SEO, WordPress Development, and PC Building. And being a proficient WordPress user, I’m dedicated to delivering quality content and a remarkable user experience.

Leave a Comment