Why we don’t use video backgrounds

Jennifer Hamrick
Tuesday 6 September 2016

The release of HTML5 in 2014 introduced a standard way to embed videos directly on a web page, rather than needing to use a plug-in such as Flash. With an easier way to embed videos, using video backgrounds on web pages is becoming a more familiar design trend.

Video backgrounds are large, sometimes full-screen, videos that sit behind other elements on a web page. Typically, video backgrounds are used on homepages in place of hero banners and act as the first visual encounter a user sees on the website.

For an example of a video background, see the website for Design & Manufacturing, a design firm from Texas.

It’s not only fancy design sites that use video backgrounds – universities are now using them too. Are video backgrounds a way to stay relevant? Should institutions incorporate them on their websites?

This post explores best practice for video backgrounds and whether or not they are appropriate for university websites.

Video background best practice

The appeal of video backgrounds is obvious: they catch the user’s eye, they are trendy and modern, they create a new way to convey a style or brand, and they can be used to demonstrate a product or service in action. But those benefits don’t mean everyone should instantly slap a flashy video on the background of their webpage.  Web designer Dudley Storey, from The New Code, says, “Don’t just use this technique because you can: video content must amplify a site’s message, not just be shown because it’s pretty.”

Quote from Dudley Storey which reads "Video content must amplify a site's message, not just be shown because it's pretty"
– Dudley Storey, The New Code

In fact, Simone Sala from SitePoint argues that certain types of websites – including blogs, online magazines, news or institutional sites – are unlikely to benefit from video backgrounds. He also lists a few other cons of video backgrounds:

  • Video might distract the user from the central task of the website.
  • Video performance depends on factors outside of your control, such as the user’s internet connection.
  • Some users may find animated backgrounds disturbing or distracting.

Accessibility is a key problem area for video backgrounds. Here are a few accessibility issues that could create a negative user experience:

  • Poor performance on slower internet connections.
  • Text overlays which are difficult to read, especially for those with visual impairments.
  • Excessive movement or sound could cause problems for those who have vestibular disorders or other reactions to sudden visual or audio disturbances.
  • Not suitable for mobile devices and could eat a lot of data.

Despite the drawbacks, there are many websites that integrate background videos extremely well because they keep the video content relevant to their brand and the purpose of the website.

For example, the background video on the website for Project Skin, a dermatology clinic, is spot on. The video shows scenes of the clinic featuring an open and comfortable reception, friendly staff and a mixture of services to promote their image as a luxury skin health clinic. The video demonstrates more than images alone could, giving potential clients a preliminary idea of what their experience would be like walking into the clinic.

If you are interested in creating a video background for your website, here are some best practice tips from SitePoint, The New Code and CSS-Tricks to make your video as effective as possible:

  • Use high quality video, but compress it to under 5mb and under 500k.
  • Limit video length to 15-30 seconds.
  • Avoid excessive movement to minimise distraction.
  • Ensure sufficient contrast with foreground text.
  • Display a placeholder image for browsers and devices that do not support HTML5.
  • Stretch video to fill its container to work on different screen sizes.
  • Don’t loop forever: endlessly looping videos can affect users’ CPU usage and slow down your page. Write script that will pause the video after X seconds.
  • Offer a pause button: there will always be people who need or would like to pause the video. Make sure they have the opportunity to do so.
  • Fade in on play: a slow fade minimises distraction or startling movement.
  • Mute the audio by default.

Video backgrounds on university sites

Despite problems with accessibility and usability, many university websites employ video backgrounds. Here is a list of universities in the UK and US which use some form of video background on their website homepage (correct as of this post’s publish date):

UK

  • Brunel University London: showcases students working on interesting and diverse projects in classroom, laboratory and workshop settings.
    • Good: no sound.
    • Bad: continuous loop with no ability to pause.
  • University of Gloucestershire: an embedded YouTube video which plays automatically with sound that is, quite frankly, obnoxious. The message of the video, to promote clearing, is not immediately obvious.
    • Good: not on continuous loop
    • Bad: automatic sound and message is lost.
  • University of Huddersfield: shows students both in the classroom and around the campus, giving a taste for what student life is like.
    • Good: darkened filter works well with the lighter text above it, no sound, content on point.
    • Bad: continuous loop with no ability to pause.
  • University for the Creative Arts: one of the most relevant uses of video, it showcases the work and production of students.
    • Good: relevant use of video, no sound.
    • Bad: continuous loop with no ability to pause.

US

  • Texas A&M University: shows a running fountain – pretty, but doesn’t seem relevant or useful for the amount of energy it takes to create a video like this.
    • Good: no sound.
    • Bad: no relevant message, continuous loop with no ability to pause.
A screencapture of the homepage for Texas A&M University which features a running water fountain.
Texas A&M University’s homepage feature a background video of a water fountain.
  • Johns Hopkins University: showcases programmes and the campus along with an information button which explains what each bit of the video is demonstrating.
    • Good: short, no sound.
    • Bad: continuous loop with no ability to pause.
  • University of Texas: very subtle “video” is really just moving flat-design banner – a lot of work for a “cool” effect.
    • Good: no sound, fairly simple.
    • Bad: continuous loop with no ability to pause.
  • Saint Joseph’s University: showcases a specific community programme involving the university.
    • Good: no sound, showcases interesting student story.
    • Bad: continuous loop with no ability to pause.

Why we don’t use video backgrounds

Universities that use video backgrounds are typically not using them well. The videos rarely contain relevant content and they end up serving as more of a distraction than anything else. They also don’t follow best practice and play on a continuous loop with no ability to pause, causing accessibility issues.

The amount of work needed to create background videos is not usually worth it. Unless done extremely well, videos don’t bring anything to a university website other than a flashy feature which has the potential to cause usability and accessibility problems.

Related topics

Share this story