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:
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

RIP Malcolm, you were awesome.
AudreY says:
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.
Audrey says:
Ok thanks will do!
David says:
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?
LexaDryke says:
Hi there,
Is there a way to get some sound from the video ?
Best
Lex
Karl says:
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
DARIN says:
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!
Emanuel Goetz says:
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?
Jeff says:
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
Antonio says:
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
David says:
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’).
Lindy says:
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/
Lindy says:
Is there a way to get video controls on this? Pause, full screen (on mobile), etc?
http://www.sangrenegratheseries.com/dev/
Aiyaz says:
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.
Susan says:
Brilliant still works in 2019 and I’m super stoked to have found this, thanks so much!
Andy says:
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!
Christine says:
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!
James says:
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?
Aiyaz says:
Hello, I tried to apply this Video Header background on my website but I don’t know why it’s not showing
domain – https://sterlingpropertyfund.com/
Zac says:
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.
Mikizinha says:
Unfortunately still no AWB icon visible, I’ll wait for the update.