Howdy, friends.
This is Part 1 of a three-part tutorial on how to create fullscreen video backgrounds and video hero banners with the Divi theme from Elegant Themes.
What do I mean by a “video hero banner”?
Invision’s website, which I like a great deal, is a good example of it:
In their banner area, an HTML 5 video loops in the background. The background video is set that behind a semi-transparent black background so that the hero copy and the call to action button is more legible. This is a very attractive technique, and it’s also very much in vogue right now.
And it’s not hard to achieve with the Divi theme.
Here are a handful of websites built by yours truly where I’ve done something similar using Divi. The most recent one is a site for Target Restoration:
Like the Invision site, I’ve set up a looping HTML 5 video in the background and set it behind a semi-transparent black so the hero copy and call to action buttons stand out enough to be readable.
You can also check out downtoearthtechnology.net and mcgregorexchange.com, both of which are my handiwork and employ the same technique in Divi that I’m outlining in this tutorial. There’s an added twist though to these latter two examples, however — the background video is fixed in its position, so that when you begin to scroll down the page it approximates a parallax scrolling effect.
What’s more, I’ve used semi-transparent background colors on the different content sections to allow the video to bleed through a little bit. That adds some visual interested to the background as well as some texture, but it’s unobtrusive enough that it doesn’t compete with body copy.
In Part 2 of the tutorial, I’ll walk you through creating the video hero itself. Then, in Part 3, I’ll talk about setting up the transparent backgrounds in Divi and how to apply them to your content. See you in Part 2.