Video Backgrounds That Phones Never Play

Video behind the headline

The home page opens with a video filling the screen: a crew at work, a drone shot over the town, coffee pouring in slow motion. A headline sits on top in white letters, with a button beneath.

On the large monitor where it was approved, it looks like a television commercial.

On a phone it often looks like something else: a frozen first frame, a dark rectangle with a play symbol, or a plain block of colour with the headline floating on it.

The video was the most expensive thing on the page to make, and many visitors never see it move.

Why phones often skip it

• Not marked as muted, which most phones require before a video starts itself.
• Not set to play inline, so an iPhone will not play it within the page.
• Low Power Mode, which stops an iPhone starting videos automatically.
• A theme set to skip video on small screens.
• A slow connection, where the first frames arrive after the visitor has scrolled.

The fourth is often deliberate, and sensible. But if nobody supplies a still image to show instead, the headline sits on a plain block of colour, or on nothing at all.

Heavy, even when it does not play

A background video is usually the largest file on the page, often heavier than all the photographs together.

Some themes hide the video on phones and still download it. The visitor pays for the heaviest file on the page, on mobile data, and sees none of it.

Even where it plays, it competes for the connection in the first seconds, while the visitor is waiting for the headline and the phone number.

Text that disappears on some frames

White text over video is readable only while the video behind it is dark.

A loop that cuts from a dim workshop to a bright sky, a white van or a pale wall makes the headline vanish for part of every cycle.

A visitor who arrives at the wrong moment sees a headline they cannot read, and does not wait for the next dark frame.

Accessibility guidelines ask for enough contrast between text and its background. A moving background passes and fails within the same few seconds.

The usual fix, a dark tint over the whole video, rescues the text by dulling the video, which raises the question of why it is there.

What the video was meant to say

Ask what a first-time visitor learns from it. Usually the answer is atmosphere: a few seconds of activity, with no sound, no captions and nothing to read.

It cannot explain a service, show a price or answer a question, and the visitor cannot pause it, rewind it or hear it.

A still photograph of the same scene says almost exactly the same thing, at a fraction of the weight, and it appears on every phone, every time.

A worked example

A fishing charter company with two boats had a home page built around a drone video of a boat running out of the harbour at dawn, with the headline and trip buttons set in white on top.

The owner noticed the problem on his own phone in Low Power Mode: a dark frame with a play symbol, and the white headline barely visible against it.

On other phones the theme hid the video, as configured, and showed a blank grey panel. On desktops, the headline disappeared every few seconds against bright water and sky.

The video was replaced with one photograph of the boat at the dock late in the day, chosen for a dark stretch of hull and water where the headline could sit. On phones, the headline moved below the photograph.

The video went to a page about a day on the water, with sound, captions and a play button, where it shows what a trip actually involves.

When a still image does the job better

At the top of a home page, almost always. That space has to say what the business does and where, and a photograph supports the words without competing with them.

Choose the photograph for the headline: a calm, even area where the words can sit, or place the headline beside or below the image on small screens rather than on top of it.

When video genuinely helps

When the motion is the information. A process, a demonstration, a walk through a space, a customer explaining what you did for them.

That kind of video deserves to be watched properly, which a silent loop behind a headline never allows.

Give it its own section or page, a poster image to show before it plays, controls, sound where it has something to say, and captions for the many people who watch with the sound off.

If a background loop stays

Some businesses will keep one. If so, keep it short and light, marked muted and set to play inline, with a poster image for every phone that does not play it.

Put the headline on a solid panel rather than on the moving image, add a pause control, and switch the loop off for visitors who have asked their device for less motion.

Then test it on two phones, one in Low Power Mode, over mobile data rather than the office connection.

The counter-case

Moving pictures are the product for some businesses.

A video production company, a dance company or a tour operator may reasonably put video near the top, provided visitors can start it, hear it and stop it, and a poster image covers the phones that do not play it.

A short, subtle loop on large screens, with a solid poster image on phones and the text on a panel, can also work well enough.

For most business home pages, though, a well-chosen still photograph does the job better, and video belongs where people can choose to watch it.

Before keeping the video

1. Open the home page on two different phones.
2. Switch on Low Power Mode and reload.
3. Watch one full loop for unreadable text.
4. Ask what the video tells a first-time visitor.
5. Replace it with a still chosen for the headline.
6. Move the video to a page about the work.
7. Add controls, captions and a poster image.

Step four is the one that decides it. If the honest answer is atmosphere, a photograph gives the same atmosphere to every visitor, on every phone, at a fraction of the weight.

The same decision about the top of the page is covered in a homepage slider nobody waits for.

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.