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)

Then you can add the video url here:

You’ll end up with something like this:

[nk_awb awb_type="yt_vm_video" awb_video="" awb_video_start_time="0" awb_video_end_time="0" awb_video_volume="0"]
Your Content Here

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="" 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


And enjoy.


To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive




Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!


Photo by Pablo Garcia Saldaña on Unsplash

Bacon Ipsum



RIP Malcolm, you were awesome.