(function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "kr4mj3n8uj"); %09</body></html>">

Can I have a video header on my website?

man sitting on vintage blue car playing guitar on beach while being filmed

Posted by Vikki

July 22, 2022

Having a video header at the top of your homepage may seem appealing and look eye-catching, but is it a good idea or not?

Let’s find out!

Accessibility concerns

First things first, let’s consider accessibility.

According to the Web Content Accessibility Guidelines (WCAG), all multimedia content must have controls that allow users to start, pause, and stop the video. This is important for people with disabilities who may need more time to read the content or understand what is happening in the video.

Add to this, videos that automatically play can be distracting or disruptive, especially for people with cognitive or neurological disabilities. This can make it difficult for them to focus on the rest of the content on the website.

Taking this into consideration, it is best to avoid using a video header altogether, or to implement video in a way that allows users to control the video (say, by providing a pause or stop button). If you still want to include a video header, it’s important that it complies with WCAG guidelines and provides a positive experience for all site visitors.

You’ve decided to go ahead with a video header

There are a few things to consider before adding a video header to your website.

First, make sure that your site’s theme is compatible with video headers. Some themes will automatically resize your video header to fit the theme, while others may not.

Secondly, consider the file size of your video header. A larger file size takes longer to load, which can impact your website’s performance.

Finally, make sure your video is hosted on a reliable platform so that it doesn’t suddenly disappear or start playing automatically. More about hosting later in this post.

Designing an accessible video header

If you decide to add a video header, consider:

  • Length and aspect ratio of the video. Video headers are typically looped.
  • Content and message of the video header. If the video is purely decorative, do you really need it?
  • Incorporating text or other elements into the header. Use clear and accessible typography.
  • Providing controls for the video. Start, stop, and pause buttons to meet WCAG guidelines.

Where do I get videos?

There are three ways you can add videos to your website:

Make your own

You can film and edit your own video. Then, upload it to a host like YouTube or Vimeo and put it on your website.

Buy from a stock footage website

If you don’t want to make your own video, you can buy one from a website like iStock or Shutterstock. They have lots of videos you can choose from and pay for.

Use free videos

You can find free videos online that you can use on your website. But make sure to check the rules before you use them, because some might only be for non-commercial use or require you to give credit to the creator.

Tell me more about video hosting!

There are several popular platforms you can use to host videos for your website, including:

  • YouTube is a free and easy-to-use platform for hosting and sharing videos. You can upload and store your videos on YouTube, and then embed them onto your website.

  • Vimeo is a popular platform for hosting high-quality videos. It offers both free and paid plans, depending on your storage and bandwidth needs. You’ll need a paid account to remove the Vimeo branding.

  • Wistia is a video hosting platform that is specifically designed for businesses. It offers advanced analytics, custom branding options, and the ability to embed videos directly onto your website.

  • Amazon S3 is a cloud-based storage platform you can use to host your videos. It’s a cost-effective option, but it may require some technical know-how to set up. Proceed with caution, or find a techy friend!

  • Dailymotion is another popular video hosting platform that offers both free and paid plans, depending on your needs.

These are just a few of the many platforms available, and the best one for you will depend on your specific needs and budget.

Alternatives to video headers

So, what can you use in place of a video header?

There are always static images! 

More and more sites are trending towards using simple, but effective, text-based headers.

These alternative options offer better accessibility and an improved user experience.

Pros and cons of a video header

Provides visual interest and makes a website stand outDifficulty in controlling the video, which can be disruptive or distracting for some users
Can effectively convey your  brand’s message or highlight key products or servicesMay slow down page load times, especially for users with slow internet connections
Adds a dynamic element to the websiteVideos that automatically play may not be accessible for users with disabilities
Can increase engagement and enhance the user experienceCan be difficult to optimize for different devices and screen sizes
Provides an opportunity to showcase your brand’s personality and styleMay be expensive and time-consuming to produce high-quality videos

Make a decision that works best for your website and caters for all users, and take all factors into account before beginning design.

Other people liked …

What is SEO, anyway?

What is SEO, anyway?

Learn to enhance your small business website through effective SEO strategies. Improve site performance, user experience, and customer engagement with mobile-first design and on-page optimization. This guide offers essential tips for using title tags, meta descriptions, and responsive design to boost online visibility.

How can I manage my website if I’m not tech-savvy?

How can I manage my website if I’m not tech-savvy?

A straightforward guide for non-tech-savvy small business owners to manage their websites effectively. It covers choosing user-friendly platforms, leveraging tools and plugins for ease, using professional support for complex tasks, learning at one’s own pace, and engaging with basic analytics to understand site performance. It emphasizes empowerment through knowledge, professional help, and accessible tools.

Why do I need a privacy policy on my site?

Why do I need a privacy policy on my site?

A privacy policy is crucial for any business website collecting customer data. It builds trust by clearly explaining how you handle data. Plus it keeps your business legally compliant and gives you a competitive edge through ethical data practices. Learn why a privacy policy is a must-have for your small business website.


Submit a Comment

Your email address will not be published. Required fields are marked *

3 Bees Digital Agency uses Accessibility Checker to monitor our website's accessibility.