How to Add YouTube Video Background in Divi Theme

Have you recently started blogging using the Divi Theme? Well, even though it might look easy once the theme is set, you will gradually learn many things. We have this covered if you want to add a YouTube video background to the Divi theme.

Adding a YouTube video background to a page comes with many perks. Not only does it helps in SEO, but it also brings more customer engagement. So, we did our research and jotted down all the steps you need to follow on the Divi theme.

Let us begin with the guide.

How to Add YouTube Video Background in Divi Theme

The real question arises: what steps do you need to follow to add the video background to the Divi Theme?

Here is all you need to know.

Step 1: Open a New Page

The first step is to log in to your wordpress site and open the dashboard. Here, on the left menu options, go to “Pages and click on the “Add New option.

divi background video, divi video, youtube background video
Adding New Page in WordPress

Step 2: Use Divi Builder

In the next step, you’ll need to select the title and then click on the options that indicate that you want to “Use Divi Builder“.

divi background video, divi video, youtube background video
Using Divi Builder

Depending on how fast your internet connection is, the website will begin loading the Divi builder on your page; from here, you are able to insert a YouTube video background into the page.

divi background video, divi video, youtube background video
Divi Builder Started Loading

Step 3: Start from Scratch

It will be more efficient to start from scratch instead of selecting a pre-built template. So you need to simply click on “Start Building” in the next window after selecting the “Build from Scratch” option.

divi background video, divi video, youtube background video
Building Page from Scratch

When you are under the “Insert Row” category, you will be able to choose a single row tab under the “New Row” section.

divi background video, divi video, youtube background video
Selecting Single Column in Divi Rows

Step 4: Choose Code Module

divi background video, divi video, youtube background video
Divi Code Module

As soon as you have completed the above steps, you will once again be asked to insert a module. Under the New Module section of the screen, you should type Code and select the “Code” module.

Step 5: Get YouTube Video Code

Now, to add the youtube video background, you need the embed code to add to the code module. For this, follow the steps here.

  • Visit the official YouTube website by clicking here.
  • If you want to add a video to the Divi theme, you need to choose the video you want to use
  • Click on the sharing option on the right-hand side of the screen.
divi background video, divi video, youtube background video
YouTube Video
  • Now you need to select the ‘Embed” option from there.
divi background video, divi video, youtube background video
Embed YouTube Video Options
  • Once the embed code appears, “Copy” it to your clipboard.
divi background video, divi video, youtube background video
Copy YouTube Video Embed Code

It’s now time for you to go back to your website and paste the code you copied into the “Code” block of your website.

divi background video, divi video, youtube background video
Paste Embed Code You Copied

Step 6: Make the Design Changes

Before you can save and add the video code to the site, you can make other design changes.

Click on the “Design section next to Code and select “Sizing“. Then, depending on how you visually need the video to look, you can use the slider to select the height, width, padding, and much more.

divi background video, divi video, youtube background video
Making changes to the code module

Finally, you will need to click on the green box with a white tick in order to save your settings.

divi background video, divi video, youtube background video
Saving Code Block

Step 7: Check the Preview

Before saving the page and the changes you made, make sure to check the preview of the video you added.

Click on the “Preview option under the “Publish section on the right side of the page.

divi background video, divi video, youtube background video
Preview Website

If it looks just as you want it to be, you can click on Publish, and you are good to go, or you can make more changes to the design.

divi background video, divi video, youtube background video
Video is Added

Once the video is added to your website, you need to make a few tweaks and increase the width depending on the size you want, and then it starts showing on the screen.

Frequently Asked Questions

Still have doubts? Here I’m sharing some FAQs which might help you out!

1. Why is my YouTube video not embedded on WordPress?

If you cannot embed YouTube videos on your WordPress site, the reason could be anything. For example, it could be something basic, such you might be using the wrong YouTube link. Sometimes, users copy the Sharing URL code rather than the Embed Code. Furthermore, your site must allow the embed codes to work.

2. How do I Autoplay Youtube videos in Divi?

Apart from adding YouTube videos in the background of your Divi Theme, you can also use specific codes to make them Autoplay in the background. For example, while adding the Embed code in the code module, you can simply add the code ?autoplay=1&mute=1 after the URL of the video.

3. How to fix the “An unknown error has occurred. Please try again late” Issue

Many users have encountered the issue where the Divi Theme Builder has yet to respond with an unknown error. Some possible solutions you can try out are using your system in safe mode and using the builder again. Or the reason could be Browser cache issues. Here, you can clear the cache from your browser and disable any third-party plugins.

Conclusion

Here is all you need to know about the steps to add a YouTube Video background in Divi Theme. Once you get the hang of it, you can do it for all your pages and blogs in the future. Try practicing the steps, and you are good to go.

Make sure you selected the right Embed Code from YouTube videos, not the URL code. Unfortunately, many users tend to make these common mistakes, and thus, the above process needs to be revised.

If you encounter any error, you can let us know in the comment section below, and we will get back to you with all the possible solutions. Remember to share it with your friends and keep coming for more answers.

Leave a Comment