Divi Tutorial – YouTube Video Background Hero Section

Divi Tutorial – YouTube Video Background Hero Section

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

 
[sc name=”customcss”]
 
– 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

Publish.

And enjoy.

 
[sc name=”learn css”]
 
[sc name=”responsive-ad”]
 
[sc name=”podcast”]
 

 

 

Photo by Pablo Garcia Saldaña on Unsplash

Bacon Ipsum

 

 

RIP Malcolm, you were awesome.

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Hey PK! AcaDaca rules forever! Thanks for cool tutorial but I’m having trouble getting it to work.

    1) The height of the video seems to be determined by how much content I add between the [nk_awb] tags, not doing 100vh. Is it not reading the css right? Put in #videobackground etc in Custom CSS > CSS ID field, both with and without the #. Width is full-width, all good.
    2) My Code module doesn’t seem have a Design tab? Just installed new site – do I need to set something?

    P.S. Thanks much for your previous tip a while back about setting up header H1-6 tags.

  2. Ok thanks will do!

  3. This was great! Thank you. So much easier than finding the mp4 and webm formats. I’m using a Full-Width Header Module for this page, http://silent.doralevich.com/

    I’m also using a background overlay, but the overlay seems to be cut off, not rendering the entire full-width top/bottom.

    Any suggestions?

  4. Hi there,

    Is there a way to get some sound from the video ?

    Best

    Lex

  5. This is great, thankyou.

    I’m thinking about having a split header that will be links to two different sections of the site. Within these I’d like two different videos.

    1. Would this be achievable?
    and 2. Is there a way that these could only play on hover?

    Cheer,
    Karl

  6. Great tutorial. I have used it many times. I have been searching for a way to get background videos to play on mobile. I have found that adding playsinline will get it to work on IOS mobile devices, but not Android. Where would I add playsinline to your code?

    Maybe you have a way now to get bg video to play on mobile? Thank you!

  7. Hey, tried out this tutorial. I like the ease of it, but I must be doing something wrong.

    I only see a sliver of the video, the rest is covered by a background cover. The thing is, that the background color can be found in the Fullwidth header section. But I can’t remove it. No matter what I do. What would you suggest is the solution?

  8. It’s really nice that you put this together as it is completely PATHETIC that Elegant Themes after all this time still has not allowed YouTube/Vimeo backgrounds. Just LAME.

    BUT, I found that this method caused some serious issues on Pagespeed for some reason. Previously I was using a slider with five 5-second videos that were about 4MB each and Google was giving me pretty poor marks on their latest Pagespeed marks (40’s) I have a fast host, dedicated server, and my target users are all businesses with fast Internet connections so I decided serving the video backgrounds locally wasn’t an issue. At one point I tried revolution slider but it was too hard to get it to do exactly what I wanted.

    Anyway, for a test on this method I replaced the slider with the five 5-second videos, with this method (hero, no slider) and joined the videos to one 25 second video and uploaded to you tube.

    The Google pagespeed went from the 40’s to the 60’s but look what happened to all the GTMetrix Scores! Yikes! Now I don’t mind continuing to host the background videos but having five separate videos load can be a little more finicky than streaming one YouTube Video. But these GTMetrix scores concern me.

    https://i.imgur.com/lv2eVUg.png

  9. Thanks you for the tutorial! Just a question (im a reeeeally noob in css), how to do the same but only showing video (not text over) and fixing the video between header and footer but with non-scroll options.. i dont know if i explain it very well… (and sorry for my english, im spaniard hahaha)

    i’ve tried all the day but i only achieve to see the video bottom-end by scrolling like 100px down, and then it’s the footer.

    Thanks you so much!!

    PS: im doing the web in local

  10. Great Tutorial, but I always receive the following error in the console:

    Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://www.youtube.com’) does not match the recipient window’s origin (‘http://www.davidgtoran.at’).

  11. Hi
    Thanks for this, but I am coming up with a blank white background – the video is not playing at all. I went through the tut several times & checked what I did…Can you help?
    Here’s the page:
    http://www.sangrenegratheseries.com/dev/

  12. Thank You. It helps a lot for a desktop version. but the video is not perfectly fitted in the mobile version. please let me know how can I fix this problem for mobile view.

  13. Brilliant still works in 2019 and I’m super stoked to have found this, thanks so much!

  14. This works fantastically, but just one question – it doesn’t look great on mobile, is there anyway to replace the video with an image when viewed on mobile? Thank you!

  15. I am at the adding text box stage to copy the short code but there is no icon appearing for me to click on like your screen shot!

  16. Thanks so much for this.

    Do you know how to make the Vimeo thumbnail a higher resolution, so that when the video is loading there isn’t a low res file lingering at the top of the page?

  17. Thanks for the tutorial. Do you have an updated version of this for Guttenburg? The AWB icon is no longer viable in divi for me.

  18. Unfortunately still no AWB icon visible, I’ll wait for the update.

New tutorials

Use a featured video in post templates with Breakdance
ACF repeater fields as accordions in Breakdance
Breakdance 2 vs. Divi 4
Breakdance 2 for Agencies

Why no ads?

Hi, I'm PK, and I maintain and publish content on this site for two reasons.

  1. To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.

  2. To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to produce better content.

Any bit of interest helps. Even sharing with your friends, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!

There's a newsletter!

Sign up to the newsletter for the occasional updates on courses, products, tutorials, and sales.