How To Add YouTube Video Background In Divi Theme? (Easy Method)

add-youtube-video-background-in-divi

Your presence made me understand that you want to learn how to add Youtube video background in Divi theme website. Including a video background has a lot of benefits; let’s discuss them after the step-by-step guidelines and the video tutorial. 

Without any delay, let’s get into the detailed instructions to include the YouTube background to the site built with Divi theme builder. The steps involved are simple; you can implement them without any trouble. 

Steps To Insert YouTube Background To Divi Website

Using the Divi builder for the WordPress site is a fantastic choice, and here are the directions to embed the video as background to your desired page. 

Step 1: Go to the WordPress Admin section, click Pages → Add New section

Step 2: Name your Page, and click → Use Divi Builder

use-divi-builder

Step 3: Now, it will redirect to Divi Visual Builder; you have to choose the option – Build From Scratch. Choose a single column like shown in the screenshot. 

divi-single-column

Step 4: Your job is to find the Code Module; select that module.

divi-code-module

Step 5: In that Code section, add your YouTube video’s Embed Code

divi-code-settings

In the Code section, do a modification like the following code for video autoplay (refer to bold section)

Yes! ​​to make your video autoplay, add &autoplay=1″ to the video’s embed code right after the video ID.

<iframe width="560" height="315" src="https://www.youtube.com/embed/PEhKhACVfaA?&autoplay=1"controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Step 6: If you want to make the video full width, you need to change the padding length in Section Settings

divi-section-settings

Step 7: Next, go to Row Settings and change Width & Max Width in the Sizing section, and also change Padding in the Advanced section.

divi-row-settings-adjust-width
divi-row-settings-spacing

The YouTube full-width video background has been successfully added to your website. So, you can present a sensitive topic through this feature and yes, it will make an emotional connection with your site visitors.

Step 8: So far, we have added just the video background to your landing page. Now, you may include any details for your visitors to take action. For example, I’m adding this full-width video as the background for a contact form, so I will pick the Contact Form module.

Step 9: You need to change some settings to make the contact form visible. Let me explain to you the settings for that!

contact-form-settings-location-divi

Step 10: In Settings, go to Advanced, then choose Absolute under Position. Give the Location as Center and increase the value of the Z Index. Now you can see the contact form in full width. You may change its width by executing the following step. 

Step 11: Go to the Design sectionSizing Change Width to 50%.

divi-design-settings

The result will be the contact form center positioned. You may see it in the video tutorial below. 

So, you have included the Contact Form with YouTube as background in your Divi theme business site. 

Video Tutorial To Add YouTube Video Background To Divi Theme

If you are in a hurry and not in a position to follow the step-by-step instructions explained above, here is a well-explained video tutorial for you! 

Benefits Of Adding Video Background To Landing Page

Till now, you have acquired the knowledge of inserting the YouTube background in Divi theme. Now, let’s see the benefits of adding the video background to your landing page.

1. Improves User Engagement

As you know, a good video is always more engaging than a static image. It can invoke your visitors’ feelings and let them react to your call to action. However, limiting the video length is better in order to offer a pleasing effect for them.

2. Boost SEO

Implementing the user experience for your blog content is the best SEO strategy. How long your visitors stay on your page will decide the search engine page ranking. An interactive video can engage your traffic well, improving your site ranking.

3. Increases Revenue

When you execute the above-discussed steps through a winning YouTube background, then you will result in making massive profits through conversion rates and sales. Audience response to your CTA and Improved SERP ranking let you receive increased financial returns.

Wrapping Up The Way To Add YouTube Video Background To Divi

A landing page with an autoplay YouTube background helps your site readers instantly look at the content without the need to scroll down a page or click the play button. It is an excellent way to simplify a complex topic and showcase your products/services. But, make sure that you incorporate a limited video length and fit for mobile devices.

Glad you have learned the best way to add YouTube video background in Divi theme. I hope the step-by-step instructions and the video tutorial are clear, which will help you get the job done in minutes. If you experience any trouble, please reach me through the comment section; I’ll explain the theme settings so that you can easily understand.

Other Divi Theme Tutorials

How To Add Google Maps In Divi?

How To Modify Divi Theme Footer?

How To Delete Sidebar In Divi?

How To Change Logo In Divi Theme?

by Sakthi
Sakthi is a thoughtful guy who specializes in WordPress Setup & Design. He is interested in designing the functional & attractive WordPress themes for the Digital marketers & Bloggers and helping them attain their goals with a tailored site. Look his ThemeForest Portfolio.

1 thought on “How To Add YouTube Video Background In Divi Theme? (Easy Method)”

Leave a Comment