Howdy, friends.
This is Part 2 of a three-part tutorial on how to create HTML5 video backgrounds and video heroes using the Divi theme. Part 1 is available here.
Before I continue, I wish to make a disclaimer. Many savvy Divi users may be asking, “Why use this technique when you can add a background video to a full-width header module, or even a standard section?”
Those modules do provide a quick way to add background videos to your content, and they can function very well as a video banner or hero. But there are times when I want a little more control over the elements of my page than what Divi offers through its modules and the Builder. And this technique also allows us to do some fancy-schmancy stuff that the standard modules can’t quite do on their own. Nothing against Divi — obviously, I’m a huge fan. But I like to think of Divi as a robust platform that can (and should) be expanded as creatively as us creatives/developers can manage. So, the technique I’m outlining in this tutorial is about augmenting Divi’s superb functionality to achieve something even more fantabulous. Fair enough?
Now, back to our regularly scheduled program.
Even though I’ve used this technique on more recent web sites, I’m going to continue to use the Thief Stoppers website as an example revealing to you, dear reader, my secret sauce.
When I was researching this technique, I found this article over at WPMU DEV[1. This is actually a cached link. The URL listed in the tutorial video points to an updated article that doesn’t contain the detailed information on using the bgvideo plugin.] on how to add background videos to WordPress posts. Lots of good information there, but the best thing about the article is its use of the free bgvideo custom plugin, downloadable over at its GitHub repository.
The bgvideo plugin gives you the ability to easily create a background video that spans the width and height of the browser. All you have to do is drop a shortcode in the WordPress text editor and set some attributes like video’s native height and width and the URLs for the mp4, webm, and ogg versions of your video; the rest of the attributes are set by default.
The real magic is in the fixed
attribute. This is set to yes
by default, and it’s this attribute that allows you to create a parallax effect scrolling over top the background video.
To get the bgvideo plugin, just go to its GitHub repository and download the zip archive.
Then you go into your WordPress backend and manually install the plugin by uploading the zip file. Once installed, use Divi’s page builder to create a section (it doesn’t have to be a full-width section), add a row, insert a full-width column, and then add two text modules. The first text module is where you’re going to drop the shortcode, like so:
[[bgvideo mp4="http://example.com/path/to-your-video.mp4" webm="http://example.com/path/to-your-video.webm" ogg="http://example.com/path/to-your-video.ogv" width="1280" height="720" poster="http://example.com/path/to-your-poster-image.jpg"]]
And now, a cautionary excursis — don’t throw your back out cheering.
Two not-so-brief words of warning:
- Make sure that your video is not too heavy; by that, I mean you don’t want the file size of the videos themselves to be exceptionally large. Otherwise, they’ll to take too long to download (especially on mobile) and that’s going to negatively impact the performance of your page, which in turn can impact your site’s SEO performance. I typically encode the video at 720p (1280 x 720) — since the average screen size on the web is around 1366 x 768, a 720p video won’t be overly pixelated if it’s stretched to fill the screen. It also will begin streaming pretty quickly, particularly if you limit your loop to 20 seconds or less. If you get much longer than that, it’s going to take too long to download.
- DO NOT upload your videos directly to WordPress unless they are TINY as videos go. You want to keep your WordPress database as spry and as light as possible. If it gets bogged down with a bunch of gargantuan video files, it’s not going to perform well. Plus, depending on who you are hosting with, delivering videos from your server may violate their Terms of Service. The last thing you want is for your hosting provider to pull the plug on your site without warning because you’re using too much bandwidth or too many resources on the server. Don’t risk your precious website going “bye-bye” because you violated your host’s Terms of Service.
To mitigate the video performance issue, I use Amazon S3 (I’ll elaborate in a future post). It’s cheap, it’s fast, and all I had to do was create a bucket there where I store and serve my HTML 5 videos. It’s as slick as a greased kid on a Slip N’ Slide, and it keeps you from cluttering up your WordPress database. And that, friends — to borrow Charlie Sheen’s parlance — is bi-WINNING.
But I digress…
As I was saying a few paragraphs ago, once you’re dropped your bgvideo
shortcode in and then you can just add another text module that has your hero copy and call to action buttons.
Next, I’ll talk about how to add multiple transparent background colors that allow the background video to bleed through using CSS and your Divi child theme.
See you in Part 3.
Hi – thanks for the tutorial – I would like to try it. How do i create a video poster?
Also, what is your opinion on uploading videos to vimeo or youtube instead of amazon s3? what would the differences ..advantages, disadvantages?
Hi, there, Hindy. To generate the poster, what I’ve done in the past is open up the mp4 version of the video in Quicktime or equivalent, leave it on pause, and take a screen shot of the very first frame. Then upload that to the WP media library and set the poster attribute in the bgvideo shortcode to the URL for the image. Nowadays, I actually use a blank PNG for the poster image and use the screenshot of the first frame as the body background on my landing page. It loads faster and is a little more trouble free,… Read more »
Thanks for the tutorial – I almost have it working, but the video is playing without sound. Do you know if it should be able to include the sound, or is it a limitation?
Hi, Iain,
If the link you provided is your example, it looks like it’s working perfectly — sound and all. If your mp3 video contains audio, it should play. I typically remove the audio so the BG video is only a visual enhancement.
Thanks for stopping by!
Rob
Hey! Nice article. Does this still work? I am trying to get a background video working on divi specifically for mobile. Id like it to only cover the header as on desktop the video works with the divi modules. However, does not on mobile.. they even have a little exclusion saying background videos don’t work for mobile, this is the only article I’ve found that mentions mobiles entirely.
Hi, Mike,
It actually does still work, but I had to make some modifications to the BGVideo plugin in order to accommodate some new behaviors and requirements for iOS.
I’m planning a follow-up article to explain things, but in the meantime you can get the modified plug-in from my Git repository: https://github.com/montidesign/bgvideo
Scroll down a bit for a quick explanation via the readme.md file.
Let me know if you need more help!
Looks like the class “bgvideo-wrapper is being added to the bottom of the page even though I add it to a section near the top of the page where I need it to be. Inspect the following link.
https://digitallyyoursmedia.com
Hi, Irwin,
The bgvideo plugin is going to append its mark-up to the end of the DOM, so this is the default behavior. But the wrapper is set to fixed position — it floats behind your content, justified against the top of the viewport.
The reason you can’t see it on your site is because all your Divi sections have a default background color of white. Set the background to transparent (or semi-transparent) on the sections where you want the bgvideo to bleed through, and you’ll be able to see it.
Hey Mike & Rob, I have the same issue. I need video to play on mobile on Divi website so I am interested to know whether you resolved your issue this way Mike?
Hi, Chantal,
As I said to Mike above, it does work, but only with some modifications to the BGVideo plugin in order to accommodate newer behaviors and requirements on mobile (particularly iOS).
Sometime soon I’m going to write a follow-up article to explain things, but in the meantime you can get the modified plug-in from my Git repository: https://github.com/montidesign/bgvideo
Scroll down a bit for a quick explanation via the readme.md file.
Let me know if you need more help!
How can I toggle the sound on a background video? Pause, Play?
This reply is way behind the times, but I think I’d need to know a bit more about what you’re trying to do.
FYI, having audio on a BG video will negate the autoplay on mobile. Mobile devices will only honor the autoplay attribute if the mute attribute is also set on the
<video>
tag, like so:<video id="bgVideo" type="video/mp4" src="https://domain.com/urlforvideo.mp4" poster="https://domain.com/urlforposter.jpg" muted autoplay loop playsinline class="bgvideo">
this is an old article. And it did not work for me. Could you tell why?
oh sorry. It worked fine for me. all i had to do was to leave visual builder mode. thanks
Thank you for this tutorial. I almost have this working but I am running into an issue. First off your part 3 page seems to have an issue with loading. So you might want to take a look at that. I got it to load in Edge after disabling scripts due to a script that was taking too long to load. So back to my issue. I’m using your fork of the plugin, I have the video background displaying and it is in parrallax. However at certain browser sizes I have white borders on both sides. At full 1920 x… Read more »
Forget it I figured it out. I just spent hours editing Divi module settings and not getting it to work. I just reread the shortcode attributes from the original article on wpmudev and saw that it stated “height – the NATIVE height of the video width – the NATIVE width of the video.” I was apparently forcing a 1280 x 720 video to 1920 x 1080, which was causing the problem. I changed the values to “width=”1280″ height=”720″” and that fixed it. RTFM right! LOL. All set. Thank you for the articles.
Hey,
Is there a way to have a toggle on/off for audio button when the background movie is running?
Would be a nice feature to have when the visitor at first sees the movie header and can turn on the sound of they’d like.
I wouldn’t advise doing that for a background video. The autoplay of the BG video on mobile is dependent on the sound being muted (or the absence of an audio track). I would recommend spawning the video with audio in a lightbox or something like that if you wanted the user to be able to watch/hear the whole thing.
how to create DIVI background video with sound unmuted ?