How to Add a Video Background to the Avada WordPress Theme
Disclosure: This post contains affiliate links, which means I may receive a small commission, at no cost to you, if you make a purchase through a link.
Adding a video background can be one of the best ways to help your blog or website stand out from the crowd. First impressions count, and by having an engaging background video can work wonders in creating a positive first impression with new customers by showing them what your site, blog, or brand is all about. It can also act as an effective showcase for some of your most popular products or services, especially when used on the valuable real estate of your site's homepage where more people are likely to see it.
Despite these benefits, it isn't uncommon for website owners to choose not to use a video background given the complexity of setting them up in the first place, for example, the seemingly endless amounts of HTML/CSS that are needed just to ensure that a WordPress video background looks good on any sized device!
Fortunately, it doesn't need to be this difficult.
There are quite a few video background WordPress themes available, and my pick of them all (and the theme I use for this website), is the Avada theme. This post will show you step-by-step how to either use a YouTube, Vimeo, or a self-hosted Avada video background.
If you haven't chosen a theme yet, or you aren't familiar with Avada, it really is the must-have theme if you want to add a WordPress video background. With Avada, you can add 60+ types of content without needing to know how to code, allowing you to spend more time creating content and less time fiddling with complex coding issues. The simple drag-and-drop visual editor and the theme's built in-responsiveness have saved me countless technical headaches!
Check out my review to see why Avada is one of the must-have video background WordPress themes:
Avada WordPress Theme Video Background:
Step-By-Step Examples
You have a couple of options when it comes to adding an Avada video background. There will be slightly different steps depending on which option you choose, so it's probably a good idea to make up your mind now!
- If you want to use a Vimeo or YouTube video background, you can get started immediately below.
- If you’d rather upload your own video to use, click here to skip straight to the relevant steps.
How to Add a Vimeo / YouTube Video Background
If you want to use a Vimeo or YouTube video background, the first step is to enable a setting in Avada's Theme Options which allows you to use these.
To get started, click Avada from the sidebar menu, and then click Theme Options from the sub-menu that appears.
Next, click Advanced from the Theme Options menu, and then click Theme Features from the sub-menu that appears.
Scroll down to where it says YouTube API Scripts and Vimeo API Scripts, and select On for whichever platform you're planning on using as the source of your WordPress video background.
Click Pages from your WordPress admin area's sidebar menu, and then either click Add New or choose an existing page.
If you're adding a new page, click the Edit With Fusion Builder button...
...and then (also for new pages), click Container...
...and finally select a 1/1 container.
In most cases, you'll want to use an Avada full width container background video, as this tends to look the best and it also provides the most impact.
To allow this, select 100% Width from the Page Attributes dropdown menu which appears on the right side of the WordPress page editor screen.
Next, click the Container Settings button on the 1/1 container...
...and set the 100% Height option to Yes.
Next, navigate to the Background tab, and then scroll down to the section that is titled YouTube/Vimeo Video URL or ID and copy and paste the URL of whichever video you want to use.
Exit out of the settings menu by clicking Save, and then click Preview from the WordPress editor menu to see your page complete with its new Vimeo / YouTube video background.
You can also adding various components to your WordPress theme video background as shown in the image below:
How to Add a Self-Hosted Video Background
Click Pages from your WordPress admin area's sidebar menu, and then either click Add New or choose an existing page.
If you're adding a new page, click the Edit With Fusion Builder button...
...and then (also for new pages), click Container...
...and finally select a 1/1 container.
In most cases, you'll want to use an Avada full width container background video, as this tends to look the best and it also provides the most impact.
To allow this, select 100% Width from the Page Attributes dropdown menu which appears on the right side of the WordPress page editor screen.
Next, click the Container Settings button on the 1/1 container...
...and set the 100% Height option to Yes.
Next, navigate to the Background tab, and then scroll down to the input that is titled Video MP4 Upload.
To ensure maximum compatibility of your WordPress video background across the various browsers that someone could access your site via, you'll need to upload files in both MP4 and WebM formats.
(There is plenty of software available for converting from MP4 to WebM or vice versa - a quick check on Google is all that's needed to find some).
Unfortunately, self-hosted video backgrounds don't work on 100% of devices and browsers, with, for example, mobile phones and older browsers typically not being compatible.
To compensate for this, you need to upload a video preview image that will be shown instead of your video if it is unable to play on a user's device / in their browser. The preview image can be a simple screenshot of the video, but pay attention to the sizing to ensure it fills the same area as the original video so as not to look out of place.
You can upload your preview image by navigating to the section titled Video Preview Image which sits in the Background section of the container's settings.
Exit out of the settings menu by clicking Save, and then click Preview from the WordPress editor menu to see your page complete with its new Vimeo / YouTube video background.
You can also adding various components to your WordPress theme video background as shown in the image below:
Avada WordPress Theme Video Background:
Top Tips
As you can see from the previous section, it's pretty simple to add a video background to the Avada theme. Having said that, there are a few things that you'll need to bear in mind if your background video is going to have maximum impact:
- Try and keep the video's file size below 5MB to ensure it loads quickly.
- Loop your WordPress video background for maximum impact. A 10-15 second clip will probably be sufficient, as the looping will make it appear longer, and the shorter duration will help keep the file size down.
- Videos that you stream from Vimeo / YouTube will likely be slower to load than videos that you host yourself. If speed is a major concern (which it should be!) choose a shorter Vimeo / YouTube clip or stick with hosting your video on your website instead.
- Try and avoid using YouTube videos that contain adverts, as these will show on your Avada video background.
- Aim to choose a video which scales effectively. For example, if the focal point of your video is mainly in the center, you add a buffer because the screen size can get narrower without the video immediately becoming ineffective.
It's possible to use different background videos on Avada depending on the user's screen size, and this can be handled via your container's settings menu (see image below). For example, you could choose a certain video for 'Large' devices such as desktops, and a separate video for 'Medium' devices like iPads, etc. This is just one of the ways that using a video background WordPress theme like Avada can make your life much easier.
- Don't use audio in your video backgrounds. Luckily, the Avada theme lets you switch this off, as not only can it be distracting, but some modern browsers don't autoplay videos with sound enabled meaning it won't work as planned.
- If you're opting for a self-hosted video background, don't forget to upload both MP4 and WebM versions to ensure maximum browser compatibility.
That's it!
Good luck with your new Avada theme video background.
Let me know in the comments if you have any questions and I'll do my best to get back to you as quickly as possible.
Thanks,
- Jonathan
Get your FREE checklist and email course to find how to consistently earn $1,000+ a month from your blog!
Get your FREE checklist and email course to find how to consistently earn $1,000+ a month from your blog!
Leave a Reply