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:

Read My Full Review of the Avada Theme

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.

Image showing how to access the Avada theme’s Theme Options tab. Users need to modify a setting if they want to use a Vimeo or YouTube file for their WordPress video background.

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.

Image showing the specific Theme Options that users need to be selected if users want to use a Vimeo or YouTube file for their Avada WordPress theme 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...

Image showing the Fusion Builder button that users need to press to be able to add an Avada video background container to their website.

...and then (also for new pages), click Container...

Image showing how users can add the container needed to hold their Avada WordPress theme video background.

...and finally select a 1/1 container.

Image showing the container type that users need to pick in order to be able to add an Avada full width container background video.

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.

Any Avada theme video background will look best whenever a site is set to one hundred percent width. This image shows the setting that will enable this.

Next, click the Container Settings button on the 1/1 container...

Image showing how users can access the specific container settings that they need to be able to modify the settings of their WordPress video background.

...and set the 100% Height option to Yes.

Image showing the height setting that needs to be modified when adding the Avada WordPress theme video background.

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.

Image showing where a user can enter the URL for their chosen Vimeo or YouTube video background.

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:

Image showing how Avada functions as a video background WordPress theme. The simple settings and customization options make it very simple to add and modify a video background.

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

Image showing the Fusion Builder button that users need to press to be able to add an Avada video background container to their website.

...and then (also for new pages), click Container...

Image showing how users can add the container needed to hold their Avada WordPress theme video background.

...and finally select a 1/1 container.

Image showing the container type that users need to pick in order to be able to add an Avada full width container background video.

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.

Any Avada theme video background will look best whenever a site is set to one hundred percent width. This image shows the setting that will enable this.

Next, click the Container Settings button on the 1/1 container...

Image showing how users can access the specific container settings that they need to be able to modify the settings of their WordPress video background.

...and set the 100% Height option to Yes.

Image showing the height setting that needs to be modified when adding the Avada WordPress theme video background.

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

Image showing where a user can upload their self-hosted files when configuring their WordPress video background.

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.

Image showing the video preview image that is required when a user chooses a self-hosted WordPress video background.

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:

Image showing how Avada functions as a video background WordPress theme. The simple settings and customization options make it very simple to add and modify a video background.

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.

Image showing how Avada functions as a video background WordPress theme. The simple settings menu makes it easy to choose different background videos to appear on different sized devices.
  • 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

avada wordpress theme review header image
avada wordpress theme review header image
28 Rules You NEED to Follow to Supercharge Your Blogging Income.

Get your FREE checklist and email course to find how to consistently earn $1,000+ a month from your blog!

28 Rules You NEED to Follow to Supercharge Your Blogging Income.

Get your FREE checklist and email course to find how to consistently earn $1,000+ a month from your blog!

Leave a Reply

avatar
  Subscribe  
Notify of