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:
- Done well, video is beautiful.
- Video backgrounds can engage with a visitor like no other medium.
- Video backgrounds can be used to sell products and services in a unique manner.
- Done poorly, video backgrounds represent an awful user experience.
- Video backgrounds can be distracting to and turn off visitors.
- 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.
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:
- 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”
- 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?
- Will the video make text unreadable?
- 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:
- 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.
- 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).
- 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.
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!
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: