Video backgrounds are a great way to make your site more dynamic and to stand out from other similar sites in your niche or industry. They can help you point the visitor’s attention to important sections on your site such as your call to action or a button that you want them to click. On top of that, many WordPress themes now ship with support for background videos and more websites are using them to make their website more visually appealing.
As great as video backgrounds are on desktop devices, unfortunately, they don’t work as well on mobile devices and disrupt the user experience. This is because many mobile browsers do not have support for background videos. In those situations, your visitors see a blank section or a glitchy video.
That’s why today we are going to talk about how to optimize and fix those tricky video backgrounds for mobile devices.
I get a lot of questions about this problem so I wanted to address it head-on. We are going to go over a few solutions to fix this problem so your users can have a great experience no matter what device they are using.
The steps in this tutorial should work for any theme that allows you to control the design settings for mobile and desktop devices separately. For the purposes of this tutorial, I’ll be using the Divi theme and the Elementor plugin so you can see how you can achieve the same background video optimization. Let’s dive in, shall we?
There are two ways to optimize video backgrounds in Elementor. I’ll cover both below so you can use whichever one is easier for you.
First, we need to tweak one setting in the existing section with background video. For that, you’ll want to click on the section and then click the Advanced tab. Under Responsive, toggle the option to Hide on Mobile and Hide on Tablet as shown in the screenshot below.
Next, duplicate that section. You can do this by right-clicking on the section and selecting Duplicate. The duplicated section will appear immediately below.
What you can do now, is choose what the mobile users will see. In this duplicated section, you’ll want to go to Advanced > Responsive and then toggle the option to Hide on Desktop.
After that, go to the Style settings and delete the URL of the background video.
Now, you’ll create a new background for this section. In this example, I added an image that’s similar to the background video. You can also choose a color that matches the rest of your website or your brand.
Alternatively, another way to optimize the video background is to set a fallback image in the Style settings for the section that uses a background video. In that case, you don’t have to create a separate section for mobile and tablet devices and a separate section for desktop users.
Keep in mind that if you want more customizations and more control over the mobile and desktop version of your site, than the first method is better.
When you’re done making the optimizations, be sure to update your page and preview it so you know how your site will look on mobile and desktop before you publish it. You can resize your browser window to see the change take effect or you can visit the page from a mobile device.
It’s worth mentioning that sites like Skype and Victoria’s secret use this same strategy to keep their sites responsive on all platforms! If you go to both sites on your desktop and your smartphone or tablet, you’ll see they look completely different.
Now that we’ve covered how to optimize your video background with Elementor, let’s check out how to do the same in a page built with the Divi theme. The process is relatively the same but it looks a bit different than Elementor.
Begin by going over to Pages > All Pages and locating the page that has the background video. Click Edit and do the same as we did in Elementor. First, disable the phone and tablet under Advanced > Visibility in the section that uses the background video.
Then, duplicate the section and in the duplicated section go to Advanced > Visibility and disable the desktop visibility.
Once you’ve removed the video background, you can change the background as you like. You can upload an image or opt for a background color that matches your brand.
This option will give you complete control over the way your site appears on mobile and desktop devices.
Similarly, to Elementor, you can simply set a fallback image for mobile and tablet devices without changing the visibility but this can potentially cause weird display issues, especially if you use an image that has text as part of the design.
As you can see, optimizing your video backgrounds for mobile devices is not difficult at all with Divi theme and Elementor plugin. However, if you’re not using Divi theme or Elementor plugin, look for the similar settings in your theme.
As always,I recommend not to rely on just the preview inside your theme. Use your devices to see how responsive they are and make changes as necessary. The last thing you want is for visitors to leave your site if your video background is not optimized and appears glitchy instead.
Any small glitch or confusion can cause a visitor to look elsewhere for your product or service, so don’t let it happen to you! As always if you want to learn more about Elementor or Divi themes you can check out this video where I compare the two. You can also learn how to create a complete website with Divi and don’t forget to check out my full review on Elementor if you’re interested in trying it out after reading this tutorial.