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

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