Full Screen Background Videos (with a Twist) in Divi, Part 2

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:

1. 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.
2. 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.