Adding Video Backgrounds to WordPress: Pros and Cons

Adding Video Backgrounds to WordPress: Pros and Cons

Attention grabbing. Captivating. Mesmerizing. Are video backgrounds the answer to creating a winning website?

When implemented thoughtfully, video backgrounds can be highly effective. Better still, it isn’t too difficult to add video to your WordPress website.

In this article we will determine if video is the right answer for your users, then cover all the necessary technical considerations to get video backgrounds up and running on your site in no time at all.

Video Backgrounds: Creative Genius or Annoying Trend?

Video backgrounds? You mean that annoying trend where designers use video footage to detract from actual content?

That’s what some argue: video backgrounds are currently en vogue without good reason and should generally be avoided.

Others have taken the time to get to know the available techniques, and still prefer not to use it because they don’t feel that the technology has enough support (yet).

Most others seem to agree that if you execute it well, it can be really effective.

What does this mean for you? Not a great deal actually, since the general consensus is mixed. It’s up to you to analyze the pros and cons of video backgrounds, as they apply to your unique needs, then make an informed decision.

Video Backgrounds: Pros and Cons

Let’s warm up by exploring the key reasons why you might (not) choose to use video backgrounds:

Pros

  1. Done well, video is beautiful.
  2. Video backgrounds can engage with a visitor like no other medium.
  3. Video backgrounds can be used to sell products and services in a unique manner.

Cons

  1. Done poorly, video backgrounds represent an awful user experience.
  2. Video backgrounds can be distracting to and turn off visitors.
  3. Video backgrounds don’t work as naturally for non-business or non-entertainment sites.

You might have a good idea where you stand at this point, but we need to explore some of the above benefits and issues in greater details in order to make a well-informed decision.

Understanding How Video Backgrounds Impact UX/UI

Before fiddling with this new technology, you should consider whether using video backgrounds will negatively impact the overall user experience of your website.

We can’t say this enough: while a video background can be effectiveusing them can go wrong quickly if you aren’t careful.

If you want to rely on your background video to sell your product, you will need to reconsider your approach. The intent behind video backgrounds is to create an ambiance by subtly contributing to the look and feel. A well-implemented video background won’t overpower the rest of the page.

Is your video there to complement the experience – focusing the attention on the content rather than itself? If not, your video will be distracting and irritating.

In many situations, it may be more appropriate to use video as a featured element rather than as an ambient background. Examples of these cases might include tutorials and in-depth product demonstrations.

Here are some basic questions to ask yourself when choosing a video background for your site:

  1. How does video strengthen my call to action? e.g. “It visually demonstrates the usefulness of my product” or “The topic of my blog is sports, which is driven by HD action”
  2. Will the video distract from the actual content of the page? i.e. does your video call too much attention to itself rather than provide the intended ambiance?
  3. Will the video make text unreadable?
  4. Will the call to action still be clear?

Don’t forget basic courtesies, either. Usability and accessibility are always important. Let your users pause the video if they have issues with focusing due to the excessive movement, and don’t force audio on your visitors. It is always best practice to let audio come as an option, rather than playing audio automatically.

Why Relying on Video Backgrounds Isn’t Mobile-Friendly

The current direction of web design is to consider mobile first (which is no surprise given that mobile internet usage reached 51% of the user market in 2015).

Video backgrounds are least friendly to the mobile audience for three key reasons:

  1. Many mobiles and tablets do not support auto-playing videos. Requiring your visitor to touch a website to play a video they didn’t expect to see in the first place is simply poor form.
  2. Mobiles and tablets often rely on data plans. Even optimized, a video is a large file. Offering such a large file to someone who simply wants to consume information and act on it will create a slow loading website that sucks down much of their data, and they probably won’t even get to see the video (see above).
  3. The technology changes slightly for each configuration. Are they on Android, iOS, or one of the lesser platforms? Are they using Chrome, Safari, or a more obscure browser? Video backgrounds cannot easily be configured and delivered to all of these platforms and apps.

If you’re set on video backgrounds and you’re not using it for anything pivotal, the simple workaround is to provide a fallback static image for mobile users.

Fallback Options for Mobile

Let’s assume the mobile experience isn’t a problem for a moment. Unfortunately, your video background implementation woes aren’t necessarily over.

Videos can create a lag effect for anyone not on a slow internet connection. You only have a few seconds to grab and keep their attention, and that lag may make the difference between a bounce and a potential customer.

Hand holding mobile next to laptop

While there are many plugins that offer fallbacks from video to image for mobile, there are not as many solutions for providing alternative behavior when the connection is too slow for your video to be effective in a non-mobile environment.

In fact, there’s no widely accepted solution for it at all!

It’s not impossible to attempt though. If you’re ready to get your hands dirty, you can experiment with JavaScript solutions to modify whether background videos load by detecting the connection speed of your user. Otherwise, you’ll have to cross your fingers and hope your non-mobile users have a decent connection!

There are simply no solid solutions for a slow connection fallback, which is why so many in the community agree that the technology isn’t ready yet.

Your best bet is to ensure that your videos are optimized for the web by offering the correctly compressed and encoded versions of your video for different devices. This process is an art unto itself, and is covered in the resources available at the end of this article.

Examples of WordPress Sites Using Video Backgrounds Successfully

Enough vague speculation. The best way to understand video backgrounds is to see some action. What out there is working, and why does it work?

Below are three WordPress websites putting video backgrounds to good use:

DSN x MFG

DSN x MFG

DSN x MFG is a manufacturing company that creates physical products for interactive marketing.

Their use of a video background works because DSN x MFG wants their clients to get excited about the possibilities of what can be made. They need their clients to imagine real, physical products that they wish could be designed and created for their brand. The video helps take a complicated concept and makes it easy for the client to get excited about what they could create.

The Good

  • High production value
  • Clearly defined purpose for video
  • Fallback to image for mobile
  • HTML5 with multiple optimized videos

The Bad

  • Low contrast between content and video
  • Video is long, buffers often on slow connections

How did they do?

  • Clear purpose:
  • Quality of footage:
  • Fallback for mobile:
  • Length of video:
  • User Experience:
  • Overall:

Riley’s Cycles

Riley’s Cycles

Riley’s Cycles is a brick and mortar bicycle shop in the UK.

Their use of video works well because they are not only creating a homey ambiance, but enabling the browsers to imagine themselves arriving to the shop on their bike. (Picturing yourself doing something has been proven to increase the chances that you’ll follow through.)

The Good

  • High production value
  • Short video that loads quickly
  • Fallback to image for mobile
  • HTML5 with multiple optimized videos
  • High contrast between video and content

The Bad

  • Lots of motion in video
  • Mobile tries to communicate with video

How did they do?

  • Clear purpose:
  • Quality of footage:
  • Fallback for mobile:
  • Length of video:
  • User experience:
  • Overall:

House of Borel

House of Borel

House of Borel makes luxury handbags in San Francisco.

Despite the potential shortcomings of video backgrounds, their use of it might be a great move because of their particular audience.

When you’re selling high fashion, you are selling much more than a functional piece of clothing. You are selling the packaging and a brand. The video features a beautiful woman arriving to a gorgeous mansion in a vintage car, and seductively wandering through elegant corridors. Spliced between these shots are artistic macro shots of the actual bags being crafted. It works because they are creating the right perception for their brand.

The Good

  • High production value
  • Fallback to image for mobile
  • HTML5 with optimized videos

The Bad

  • Video is long, buffers often on slow connections
  • Audio plays automatically

How did they do?

  • Clear purpose:
  • Quality of footage:
  • Fallback for mobile:
  • Length of video:
  • User experience:
  • Overall:

Video Backgrounds: What to Keep in Mind

We have already covered the basics in a previous article in terms of you need to start installing video backgrounds on your WordPress website, so let’s now focus on the key considerations you should bear in mind when implementing video backgrounds:

  1. Am I providing a good fallback experience for mobile?
  2. Can I upload different video formats to provide the best experience for a variety of use-case scenarios?
  3. Is all of the page content still readable and accessible throughout the entire video?
  4. Does the video test well across multiple platforms?
  5. Will the video load well on poor to average connections?

At the end of the day, no matter what methods you use, it’s still up to you to provide a good user experience for those using your website. That must never be forgotten!

Do you use video backgrounds, are you going to now, or do you feel strongly against the idea? Share your comments and questions with us below.

Image credits: Anne DorkoGilles LambertWilliam Iven.