Every now and then one of our web development projects requires the use of a background video, typically in the hero section. Although background videos, when implemented and optimised correctly, can effectively communicate a desired message or mood in a matter of seconds, it is crucial to ensure that on smaller devices we load a compressed version of the video or completely replace it with an image.
And even though this may seem like a simple task, when I was developing one of our latest projects that required a background video, I noticed that Bricks, the WordPress builder that I was using, didn’t offer this option. Not only that, but while doing some research on the web (or the interweb, as one of my clients called it the other day 😅), I realised that “background video” is not a standard HTML property, which means that there is no straightforward way to achieve the desired result.
At this point, I asked on Bricks Facebook group if anyone over there knew of a solution to this challenge, and Maxime Beguin pointed me to this Stack Overflow post where a person by the name Paul Rob shared a simple and elegant Java Script snippet (also available as jQuery) that looked exactly like I was looking for.
After a few hours of work, I was able to achieve the desired result, and you can see it in action on this website (if you resize the screen and inspect the code, you can see that when the browser window is wider than 1367px, a full HD video is loaded, while a 720p version is loaded between 1366 and 767px, to make room for a static image below 766px).
As soon as the project was launched, I realised that it would be very helpful for developers like you to be able to stop a background video from loading on mobile, so I decided to create a video tutorial where I build it so you can follow along, but not only that, I also created a Codepen where you can see the technique in action, and implement it in any other project using tools beyond Bricks Builder, like other WordPress or visual builders that allow the use of code blocks, or even plain HTML, CSS and JavaScript.
Video tutorial
Check out my tutorial here. It’s 20 minutes long, but if all you want to do is create the section with the background video, you can go to minute 8:43 and follow my steps. But if you have a little more time, I’m sure it would be useful to look at the previous chapter where we look at an Adobe XD file where you can see exactly what we need to build before going into the builder.
As Codepen
As I mentioned before, to make using this technique as accessible and easy to use as possible, I wanted to create a Codepen where you can see it in action and use the exact same code for your project. Here is the link.
I hope you find this tutorial useful, but if your skills as a developer are not up to it, you can always contact me at in**@ub***************.fi and I can help you integrate it into your project (on one condition that you do not use Divi Builder 😁).
Lots of love for the day from the little island of Korpo 💚 Please subscribe to my blog below, I promise to share more interesting information like this and to keep you inspired.