Chat with us, powered by LiveChat
Full Screen Background Videos (with a Twist) in Divi, Part 2

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 DEV1 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...
Full Screen Background Videos (with a Twist) in Divi, Part 1

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

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