DON'T add a video background to your landing page to make it more gorgeous [TW: gratuitous swearing]
Tags: a11y, webdev
Published: 2021-11-26 14:43:21

I said I wasn't going to do angry rants anymore. I really did try. But fuck me people are still creating tutorials on how to create video backgrounds? 

Have I gone back to 2010 when nobody gave a fuck about performance, or the environment, or conversions, or people with disabilities??

Strap in ladies, gents and non-binary peeps, shit is about to get ugly as I explain why you are a fucking dipshit if you think a video background is a good idea.

## Everyone has unlimited data
Ah yes, a prime example of "the arrogant developer effect" in all of its glory! 

"I have 10GB of data on my plan so a 30 second looped video is nothing".

How arrogant and misguided do you have to be to think that every person can afford your 20MB video as part of their data plan. 

Some people have less than 1GB of data a month as part of their plans. Some people have no included data at all!

It is the same shit as the people who think that Chrome is the only browser and you can just use the latest CSS and JS features without looking at caniuse.com! 

But this isn't a rant about how people don't understand browser compatibility, I will save that for another day.

No this is a rant about video backgrounds, and I will kick things off by saying your video **costs people money**.

What if someone is from Namibia, where one GB of data costs over $20! Your 20MB video just cost that person 40 cents.

When the average salary is just $13,200 a year in Namibia (compared to $54,000 in the US) that is roughly the same as $1.60

Nearly 2 fucking dollars to watch your shitty "artistic" video. Do you actually think your 30 second looped video of swirling colours is worth $1.60?

## Who gives a fuck about the environment
While we are talking about excessive data usage, did you even consider how much electricity it costs to transmit your shitty video?

[Transferring 1GB of data can produce as much as 3kg of CO2!](https://www.emergeinteractive.com/insights/detail/does-irresponsible-web-development-contribute-to-global-warming/)

So for every 50 visitors to your site who get exposed to your 20mb video background "masterpiece" you just added 3kg of CO2 to the global warming crisis.

If you get 1000 visitors a day, in a year you add 21.9 **metric tonnes** of CO2 to the atmosphere (about 24 tonnes for those people in backwards Countries who don't use metric). 

Do you hate humanity, is that why you do this? Greta will be pissed at you. How dare you!

## Who gives a fuck about disabled people?
I mean we have already established that you don't mind costing people money and destroying the environment, why would we expect you to care about disabled people?

But just in case there is a shred of a soul left inside that husk you call a body, let me tell you another reason why video backgrounds are a bad idea.

Some people on this planet have vestibular disorders. I say some people, [around 1 in 15 people](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4069154/#:~:text=The%20study%20found%20lifetime%20adult,preponderance%20%5B27%2C29%5D.).

These people are sensitive to motion and can actually feel nauseous with unexpected movement. Your video can cause these feelings of nausea.

Some people also experience paranoia and unexpected movement can be triggering and disconcerting for them. Your video could be quite disturbing for some people.

And some people have attention disorders which can make your video very distracting. Your video can be so distracting that they can feel overwhelmed and leave your site.

Now you could use media queries and `prefers-reduced-motion` to decide whether to play the video and provide controls to stop the video...but nobody does that if they use a background video. 

I could go on about how you would then need to hide those controls and the video from screen readers, how you would need to provide an audio described version of the video if it contained anything at all of relevance to the page etc. etc. but you aren't going to listen, we have already established you don't give a fuck about other people. 

I am not done yet though. The biggest problem with video backgrounds is colour contrast.

How can you possibly keep a 4.5:1 contrast ratio of text with a video? At some point there will be a section of the video that has text in front of it that will be too light (or too dark) to provide sufficient colour contrast to make the text legible. 

How annoying and inaccessible do you have to want to make your site to make text that is readable "some of the time"? Ah well, there are only 1 billion people in the world with disabilities, we can afford to ignore their needs.

## OK you are a selfish human being
Fine you don't give a shit about other people. Let's talk about you!

To be precise, let's talk about your site conversion rate.

Now if you already thought having a video background was a good idea then you probably don't even know what conversions are. 

So let me bring you up to speed.

When someone visits your site you want them to do something. 

Whether that is buy something or make an enquiry, right through to liking or sharing an article.

At the very least you want people to stick around!

Now the ratio between the number of visitors to your site and the number of people who complete your desired action is known as your conversion rate.

If you can double your conversion rate it means that you get twice as much engagement / money without needing to get more visitors (which is costly and or time consuming).

Now that you know why it matters you might see where this is going.

A video background distracts people. 

The last thing you want to do is distract people. 

They come to your site for a reason...and I can almost guarantee that it isn't to watch your artsy fartsy video.

And before you go saying something like "it adds important interest to the page"...if it was that fucking important it wouldn't be a bloody **background** video. 

So don't feed me that bullshit.

And if that is your objection then go on, run along, you are beyond help.

Still here? Then listen up! 

Your video is distracting people from your end goal. It is even worse if you have a call to action positioned in front of the video background. Why draw attention **away** from the button you want people to click?

Why would you place something on your site that is damaging your conversion rates but adds nothing of value?

## So what is the answer?
**Don't have video backgrounds.** 

It really is that simple.

I am not saying don't have videos. Videos are great. But don't auto play them and don't make them a part of the background.

Make them a part of your conversion process. Make them persuasive, informative and useful. Make them in line with your goals and the goals of the site.

If you want some animation and movement on the page then look at canvas, SVG, CSS etc. You can add plenty of visual interest in a few KB of code (Just remember to allow people to switch animations off).

Now go forth and delete those video backgrounds, watch your conversions increase and help make the world greener and more inclusive with one stroke of the delete key!

## Finishing Up
As always the anger is for fun!

As for those who read the original article, this is nothing against that article, it was well written, it is just that concept itself is outdated and a bad practice.

Anyway, that is enough disclaimers, have a great weekend all!