Autoplay, Sound and the Back Button

Why sound is different

Every other design mistake is a private irritation. Unexpected sound is a public one.

Somebody browsing in an office, on a bus, in a waiting room, or beside a sleeping child suddenly broadcasts your homepage to everybody nearby.

Their first action is not to find your mute button. It is to close the tab, which is faster and certain.

That visitor is gone, and the reason they left is one you would never have found in any report.

Browsers already prevent most of it

Worth knowing, because it changes what you should expect.

Modern browsers block autoplay with sound in most circumstances, which means the video either does not play or plays silently.

The consequence is a homepage built around a video that a substantial share of visitors see as a still frame, or as nothing at all.

Which is worse than either choice made deliberately: you are neither getting the video nor a considered still image.

If your site depends on video playing automatically, it is worth checking what actually happens on a phone rather than assuming.

Muted background video

The remaining common case, and it is a genuine judgement.

A short silent loop behind a heading can look good and communicate atmosphere in a way a still cannot.

What it costs: several megabytes, a delay before the main content appears, battery on a phone, and mobile data the visitor is paying for.

The honest test is whether the video says something a photograph could not. Frequently the answer is no, and the video is there because it was available.

For a restaurant, a workshop, or anything where movement is part of the appeal, it may earn its place. For a professional service, it rarely does.

A worked example

A gym whose homepage played a thirty-second montage automatically, muted, at about eight megabytes.

On mobile data the page took eleven seconds to become usable, because the video loaded before the text.

They replaced it with a single still from the same footage and moved the video to a page about the facilities, where it played when somebody chose to watch it.

The homepage went to under three seconds. Enquiries rose over the following months.

The video was watched more often on its new page, by people who had chosen to, than it had ever been watched as a background nobody looked at.

Nothing was lost. The video simply moved to where it was wanted.

If you are using video

1. Muted, always, with no exceptions.
2. Short, under about ten seconds if it loops.
3. Compressed hard, since it is decorative rather than a viewing experience.
4. With a still image behind it for anybody who does not get the video.
5. Not on mobile, where the cost is highest and the benefit lowest.
6. With a visible pause control if it is more than a brief loop.

The fifth is the one most sites skip. Serving a large video to a phone on mobile data is the worst version of this, and disabling it there is usually a setting.

The counter-case

Where autoplay is right.

A video that is the point of the page, where somebody arrived specifically to watch it and playing immediately is what they wanted. Even then, muted, with sound on a click.

Very short decorative loops that are genuinely light, a second or two, which are closer to an animated image than a video.

And anywhere the user has explicitly opted in, such as a playlist they started.

Sound without a click has no defensible case on a business website. There is always a control the visitor should have pressed first.

Other things that move

The same reasoning applies beyond video.

Animated text, elements that fly in as you scroll, parallax backgrounds and counters that tick upward all cost weight and attention.

Used sparingly they add polish. Used throughout they make a page tiring and slow, and they delay the content behind an effect.

The test is whether somebody in a hurry is helped or held up by it. An animation delaying reading by half a second, forty times down a page, is twenty seconds of somebody's afternoon spent on decoration.

The cost on a metered connection

A consideration that gets forgotten in offices with unlimited bandwidth.

An eight megabyte background video is eight megabytes of somebody's mobile data, spent without being asked, on something decorative they did not request.

For anybody on a limited plan, or roaming, or in an area where data is expensive, that is a real cost imposed by a visit to your homepage.

Most will never know why their allowance disappeared. Some will, and it is not the impression a business wants to leave.

Which is another argument for not serving video to mobile at all, and for treating anything decorative as something the visitor should be able to avoid paying for.

People who cannot tolerate motion

A genuine accessibility consideration rather than a formality.

Motion causes real physical discomfort for people with vestibular conditions, including nausea and dizziness.

Operating systems now carry a setting where somebody can indicate they prefer reduced motion, and a well-built site respects it by disabling animation for those visitors.

That is a small piece of work and it is the difference between a site somebody can use and one they have to leave.

It costs nothing for everybody else, since the setting only affects the people who explicitly asked for it.

Where video does work

Since the argument above is against a particular use rather than against video.

A short piece explaining a process, on the page about that process, where somebody chose to watch it.

A customer talking about the work, which carries more than any written testimonial and is watched because people are curious.

A walkthrough of something difficult to describe, where showing beats explaining.

All of those are watched deliberately, load when requested rather than automatically, and belong on the page about their subject rather than the homepage.

The rule that covers it: video the visitor asks for is an asset, and video played at them is a cost.

What to check on your own site

Open it on a phone, with the volume up, somewhere quiet.

Does anything play. Does anything move before you scroll. How long before the text is readable. Is there a way to stop whatever is moving.

Then try it on mobile data and see how much of the delay was the decoration rather than the content people came for.

What that decoration weighs is covered in how many things a page loads.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.