DEV Community

Cover image for ❗ DON'T add a video background to your landing page to make it more gorgeous ❗  [TW: gratuitous swearing]
InHuOfficial
InHuOfficial

Posted on

❗ DON'T add a video background to your landing page to make it more gorgeous ❗ [TW: gratuitous swearing]

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!

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.

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!

Discussion (27)

Collapse
hanpari profile image
Pavel Morava

1GB of data download cannot produce 3kg of CO2 unless you use a really obsolete computers powered by very primitive steam machine, and even so I would be really surprised.

And when talking about computers I am talking about clients and servers.

Use your brain, people. It is virtually impossible to get such a number if you know a bit of physics.

You are only harming ecology claiming such ridiculous nonsense.

Collapse
inhuofficial profile image
InHuOfficial Author

I picked the most extreme article to prove a point.

But you are correct if this were a journalistic piece about the climate impact of data transmission I would deserve to be shot. 🤣

In reality the more accurate figure in a country that is fibre based, uses renewable energy in the data centres and has modern exchanges on most of its network would be about 75 times less than that (e.g. UK, Germany etc). On a country utilising copper wires and old tech (of which there are plenty) the figure is actually on the low side.

As for the physics part that is nonsense, you could easily use physics to prove that transmission costs could be multitudes higher if the wrong medium for transmission was used and depending on the distance due to losses to heat etc. If you have to boost the signal 50 times between the server and the end client there can be massive costs.

A better argument would have been money as @miketalbot said, it would be easy to work out that 5kwh / GB would bankrupt most companies. Yet again though, depends on the Country and infrastructure so we can’t make sweeping claims.

Collapse
miketalbot profile image
Michael John Talbot

I agree, the paper (not sure it is peer reviewed) that the linked article refers to implies that watching a movie costs $1.54 in energy in 2012. God knows what this would do to the business model of Google and Facebook et al with their streaming video ads and 1bn impression content. If this were true, surely there must be a huge amount of quantitive easing in the energy market to invent the money for this as otherwise no internet company would be viable.

I think that the potentially dodgy math shouldn't diminish the point that efficiency in data transmission is an important topic in reducing carbon emissions and we should seek to do this. I would argue that it is more likely that we are being efficient using the Internet to watch movies compared to the process of making physical things out of plastic as a delivery device, that notwithstanding transmitting unnecessary data must have an impact on some scale.

Collapse
inhuofficial profile image
InHuOfficial Author

As always a nice and balanced response!

As I said the amount in a Country with modern architecture the actually amount is somewhere around 45g of CO2 per GB so far less impact than I made it appear!

It would be super interesting that if we ignored plastic waste whether a blue ray was better for the environment than streaming in 4K in terms of CO2, what a great idea for an article!

Collapse
ingosteinke profile image
Ingo Steinke

I remember spending a summer holiday on an island with limited internet connectivity and, back then, a limited data plan where everything above 1 MB data transfer per month became quite costly. And at that time, there were extra charges to pay if you dared to use your phone and mobile internet outside of your home country.

Near the beach bar, I saw a poster announcing a live concert by some local singer and wanted to check their website to see if there were any upcoming gigs around our place. The musician's website featured their current music video which started to play automatically. Soon, the music stopped. And so did my data plan.

Never went to see the artists (not due to the website, but probably didn't fancy their music) but I still remember the story!

Collapse
inhuofficial profile image
InHuOfficial Author

Cool where was the island?

Collapse
ingosteinke profile image
Ingo Steinke

not sure ;-) either Sardegna or Corsica, one of them was where my data plan ran out, the other one where I was offline 2 weeks on purpose ... some years ago obviously

Thread Thread
inhuofficial profile image
InHuOfficial Author

Obviously, we all know it is impossible to be offline for 2 hours nowadays never mind 2 whole weeks! 🤣

Collapse
jmau111 profile image
Julien Maury

Data consumption and contrast issues are undeniably common concerns when using video backgrounds. I like to test websites with old (but not so old) android smartphones, and it's a massive pain, most of the time.

A little detail that bothers me in your post:

(compared to $65,000 in the US)

The average salary is $65k in the US? are you sure?

Collapse
inhuofficial profile image
InHuOfficial Author

You are right, after looking at more articles rather than the first one that shows up it is about $54000 (can’t find official figures so if there are some they would be great!).

I will correct that now!

Collapse
jmau111 profile image
Julien Maury

it's not a big deal, and I did not know the figure, but I found it a little high.

Collapse
siddharthshyniben profile image
Siddharth

I totally can relate with 2 of the above problems, costly data in India and also disabilities in my family. Great that you are raising awareness (even if in a silly way :D)

Nice cover image 🤣

Collapse
inhuofficial profile image
InHuOfficial Author

The cover image is a little hint towards the article that inspired my rant if it appears a bit random!

Saying that the title is only one word different so I am sure the cover image was overkill! 🤣

Collapse
posandu profile image
Posandu

Transferring 1GB of data produces 3kg of CO2!

😭

Collapse
code913 profile image
code913

Warning: Intense sweari-

Son of a 💩 I'm in

Collapse
inhuofficial profile image
InHuOfficial Author

🤣

Collapse
code913 profile image
code913

Taylor's website has broken css. And this is on chrome android latest
Accept dookies dialog has broken css

Collapse
inhuofficial profile image
InHuOfficial Author

Sorry I might be being slow but who is Taylor?

Collapse
code913 profile image
code913

The girl in the article cover?

Thread Thread
inhuofficial profile image
InHuOfficial Author

Lmfao I completely forgot I had put her in the cover 🤣🤣. That is a proper face palm moment! 🤣

Collapse
bhagyamudgal profile image
Bhagya Mudgal

Can you review my Portfolio bhagyamudgal.me

Collapse
inhuofficial profile image
InHuOfficial Author • Edited on

That very much depends, do you want "a review" where I look at your site and give you a few pointers and tips to improve it.

Or do you want "A REVIEW" where I pick apart every tiny little thing that isn't absolutely perfect with the site and trash you to within an inch of your life making you wonder why you ever thought you wanted to become a developer? (same as this article, anger is for fun!)

Happy to do either, if you are brave enough to go for the second option I will do a whole article on it...but it will be brutal 🤣!

Collapse
bhagyamudgal profile image
Bhagya Mudgal

I want a genuine review so I am ok with 2nd option.

Collapse
inhuofficial profile image
InHuOfficial Author

I hope you all have a great weekend, if you have an example of a site using a video background that doesn't need it or where it ruins contrast etc. then let me know in the comments.

Collapse
codyseibert profile image
Cody Seibert

So are you an expert in online marketing and conversion rates?

Collapse
inhuofficial profile image
InHuOfficial Author • Edited on

I know enough to be dangerous but wouldn’t call myself an expert by any means! 😜

Certainly know a lot about performance and it’s impact on conversions though if you need info on that.

Why you asking?

Collapse
abhiram profile image
Abhirama sundaram • Edited on

Wondering how much CO2 is being consumed by Youtube :-D