If you run a local service business, make the first screen a real photo, your headline, your phone number and one button, and keep any video one click away behind a play button. A homepage background video earns its place in narrow conditions: the footage shows your work in a way a photo can’t, it runs silent, it carries a visible pause control, and the page tests no slower with it. Skip video on the homepage when nobody can keep the footage current, or when no clip you have shows anything a photo doesn’t.
The first screen is where a visitor decides whether to call. A video that holds up the biggest element on the page, competes with your phone number and button, or moves with no way to stop it costs that decision some attention. And moving content that starts by itself can fall under an accessibility criterion that asks for a way to pause it. That’s a layout decision, not a taste decision.
The Three Homepage Options at a Glance
Keep means a muted video loops behind your headline and starts by itself, without a click. Swap means a still photo fills the first screen and the video starts only when a visitor presses play. Skip means the homepage carries no video at all.
| Option | What the browser measures | Pause control | What the visitor sees first |
|---|---|---|---|
| Keep the autoplay background video. | If the video is the largest element, its poster image or first frame sets the time. | Needed when it plays by itself for more than five seconds beside other content. | Moving footage behind the headline and button. |
| Swap for a photo, with the video on click. | The photo, like any other image. | The criterion covers content that starts automatically, and a clip that waits for a click doesn’t start that way. | A real photo with the headline, phone number and button. |
| Skip video on the homepage. | A photo or text. | Not applicable. | The headline, photo, phone number and button. |
Speed: The Video’s First Frame Can Get Measured
Swap and skip win this one, because a photo is the thing being measured and it’s the thing you control. Browsers measure how long the largest image, block of text or video on the first screen takes to appear. That measurement has a name: Largest Contentful Paint, or LCP.
For a video, web.dev’s explanation of Largest Contentful Paint says the measurement uses whichever comes earlier: the moment the poster image loads or the moment the first frame appears. A poster image is the still picture a video shows before it plays. So if your loop sits behind the headline, its opening frame can be one of the things the measurement considers. The same page says Chromium-based browsers leave elements that cover the full viewport out of the measurement, since those are likely considered background rather than content. A full-screen loop may therefore not be counted at all.
Read that page for what it is. It defines how the measurement treats videos. It doesn’t say a background video is slow, and it makes no claim about rankings.
Which means you test rather than guess. Load the page as it stands, then load it with the video removed, and compare what the measurement reports. If the result doesn’t move, the loop isn’t slowing that measurement. As a general rule a video file can weigh more than a compressed photo, so the comparison is worth running before you commit either way.
Accessibility: Moving Content Needs a Way to Stop It
Swap and skip win here too, and they win without any extra work. W3C’s explanation of the pause, stop, hide criterion sets a plain condition: when moving content starts automatically, runs longer than five seconds and is presented beside other content, a visitor needs a way to “pause, stop, or hide” it. The exception is movement that’s an essential part of an activity. W3C lists the criterion at Level A.
Our reading: a decorative loop behind a headline doesn’t look like an essential part of an activity. It’s scenery. So if you keep the loop, a pause control is what the criterion asks for, not an extra.
In our reading, a clip that waits for a click doesn’t start automatically, so the first condition isn’t met. That’s the quiet advantage of a play button. If you’d rather keep the loop, ask your designer one question: where is the pause control, and would a visitor find it?
Clarity: Keep the Phone Number and Button in Plain Sight
Swap and skip win on clarity. Our reading is that the first screen has three jobs: say who you are, say what you do, say what to do next. Movement behind text can compete with all three. Text laid over a moving background can be harder to read, and a visitor working to read a headline isn’t reaching for the phone.
Spilt Media’s website design services page says it builds each page to guide visitors toward a specific action, such as calling the office or booking an appointment. On a homepage, that action is the phone number and the one button beside it.
If you’re swapping to a photo, read how to design the still hero image before you choose the shot. One photo. One headline. One button, where a thumb expects it.
Phones: Plan for the Narrowest Screen First
Swap wins on phones. Decide what someone holding a phone sees in that first screenful, and treat that layout as the real one instead of a shrunken copy of the desktop view. A background loop that looks cinematic across a wide monitor can crop down to a blur of motion behind three lines of text.
As a general rule, video can use more data and battery than a photo. One workable arrangement: show the still photo on phones even if the desktop layout keeps a loop. Same headline, same button, lighter first screen.
When a Background Video Is Worth Keeping
Keep wins, but only when four things hold at the same time. The footage shows the work in a way a photo can’t: a crew mid-job, a machine running, a result that only makes sense in motion. It runs silent. It carries a visible pause control. And the page tests no slower with it than without it. Miss one of those and the loop is costing you something it isn’t paying back.
Before you commission footage for the first screen, it’s worth settling which videos are worth paying a crew to shoot.
Here’s where the swap loses. Footage behind a play button can get watched less than footage that plays by itself, because a click is a decision and some visitors won’t make it. That puts more weight on the photo, and the photo has to be good and real — a staged shot of a stranger in a hard hat won’t carry a homepage. A click-to-play video also needs an owner. Somebody has to keep the footage current when the trucks get rewrapped, the uniforms change or the work you lead with stops being the work you want.
Choose Keep, Swap or Skip by What the First Screen Must Do
- Keep if your footage shows something a still photo can’t, it plays silent, a visitor can pause it, and the page tests no slower with it. Recommendation: hold the loop, and put the pause control where someone will see it.
- Swap if the homepage’s job is to get a call, and you have one honest, well-lit photo of real work. Recommendation: lead with the photo, and move the video behind a play button.
- Skip if nobody owns the footage, or no clip you have shows anything a photo doesn’t. Recommendation: leave video off the homepage and put the effort into the headline and the photo.
If two of those describe your site at once, let the first screen’s job break the tie. A page that exists to get a call behaves differently from a page that exists to show scale.
Frequently Asked Questions About Homepage Background Videos
Can I keep the video if I add a pause button?
Yes, for that criterion. A way to pause, stop or hide the movement is what W3C asks for when content starts automatically, runs longer than five seconds and sits beside other content. But a pause button does nothing for how fast the page loads. Test speed separately, with the video and without it.
Should a homepage video have sound?
Our reading: a background loop should be silent. Sound that starts by itself surprises a visitor, and a surprised visitor reaches for the volume instead of the phone. If the clip has speech worth hearing, it belongs behind a play button, where the visitor chooses to start it and expects to hear something.
What should the still photo show?
Our reading: real work. The crew on a job, the work in progress, or the finished result, photographed at your own sites rather than staged. Whatever you pick has to leave room for the headline, phone number and button to stay readable on top of it. If the text fights the photo, the photo is wrong.
Where else can the video go?
Our reading: on the service page it explains, on an about page, or inside a post about that kind of job. Have it start on a click, and name it for the service it shows so a visitor knows what they’re about to watch. Footage does more work beside the service it belongs to than behind a headline.
Want Help Deciding What Your Homepage Should Open With?
Bring the page you have and whatever footage you’ve got. We can talk through what your first screen needs to do and which of the three options fits it. If that would help, book a consultation with Spilt Media.