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)
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
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:
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.
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
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.
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:
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.
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.
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:
Start by navigating to “Design > Sizing” and change the size of Width and Max Width as mentioned in the below image.
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.
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:
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”.
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
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.
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.
