So.. this one was requested, and looks to be useful for some websites that would benefit from using video in the background.

First, this tutorial is focused on adding a video background to the full-width hero section. If you want to try out other settings, then definitely have a play with these resources!

We need a Plugin.

Let’s start with this plugin:

Advanced WordPress Background

Yup, get it installed and activated.

Get the Shortcode

Once you get the plugin, we can go ahead and start a new page (or go to your page where you want to add it)
and add a text module. (It’s just to extract the shortcode, and not much use beyond that)

Divi Tutorial - YouTube Video Background Hero Section

Then you can add the video url here:

Divi Tutorial - YouTube Video Background Hero Section

You’ll end up with something like this:

[nk_awb awb_type="yt_vm_video" awb_video="https://www.youtube.com/watch?v=JoMLhnvV-yM" awb_video_start_time="0" awb_video_end_time="0" awb_video_volume="0"]
Your Content Here
[/nk_awb]

We only need the shortcode that displays the video and not the content inside. So just delete that.

Copy the shortcode. We’ll need it in a sec.

Make a Full-Width Section

Now we go deeper. A couple of things are gonna happen at once. But I’ll explain it like I did in the video.

Get the content in place first, and then add the styling.

Make a full-width section.

Add a full-width code module.

Insert the shortcode, and put p tags around it.

<p>[nk_awb awb_type="yt_vm_video" awb_video="https://www.youtube.com/watch?v=JoMLhnvV-yM" awb_video_start_time="0" awb_video_end_time="0" awb_video_volume="0"] [/nk_awb] </p>

Add a full-width header and make it full screen. Add your stuff to it except for the background color (because it’ll cover the video..)

Now for some codes

Copy the following css code and add it to the page custom css
(Note: check the height of your header and change the value for top in #videofront)

#videosection {
  height: 100vh;
}
#videobackground .et_pb_code_inner {
  position: absolute;
  height: 100vh;
  top: 0; right: 0; bottom: 0; left: 0;
}
#videobackground .et_pb_code_inner .nk-awb {
  height: 100vh;
}
#videofront {
  position: absolute;
  top: 110px; /** This should be the same height as your header **/
  width: 100%; 
  z-index: 10;
}

– The section has a custom id of videosection

– The code module has a custom id of videobackground

– The code module also has a margin of -110px in the design tab (Note: the 110px is the height of your header)

– The full-width header tab has a custom id of videofront

Divi Tutorial - YouTube Video Background Hero Section

Publish.

And enjoy.

 

 

Photo by Pablo Garcia Saldaña on Unsplash

Bacon Ipsum

 

 

Divi Tutorial - YouTube Video Background Hero Section

RIP Malcolm, you were awesome.