Answer in brief
A background hero video is always silent, always heavy, and never tells you whether anyone wanted it. Here is where motion genuinely earns its place, where a poster and a play button are enough, and why the grade belongs in the export rather than in CSS.
The short answer: video sells motion, not information
A first screen has one job — tell a visitor what you do and what to press next. Video is good at showing movement, texture, scale and people. It is poor at holding a price, a specification or an address, because a reader scans those and nobody scans a clip.
So the useful question is not video or no video. It is this: does the thing need to move in order to be understood? Fabric drapes, a machine cuts, a room turns out bigger than the photograph suggested, a person is believed because you can hear them. Motion carries that.
When the answer is no, a still image with a caption does the same work for a fraction of the bytes, appears on the first paint, and can be read on a train with two bars of signal. That is not a compromise or a cheaper option; it is the correct format.
The rest of this article deals with the two decisions that follow from it: whether the clip starts on its own, and what that costs on a phone, inside the browser, and in your own production budget.
Autoplaying background loop versus a poster and a play button
A background loop starts without asking. It spends a visitor's data, battery and attention before they have decided your page deserves any of the three. A poster with a play button costs one image and one deliberate press.
The poster route has a side benefit: it measures interest. If almost nobody presses the button, the video was decoration and you found that out cheaply. Autoplay can never give you that signal, because in the numbers every visitor watched.
There is still a narrow case for the loop: a short, silent bed behind a headline where the content genuinely is the atmosphere — a restaurant room, fabric moving, a workshop floor. It has to be muted, brief, and it must carry no information at all.
Anything with captions, a talking face, a number on screen or a sequence that matters belongs behind a button. The visitor needs to start it, stop it and go back, and a background loop offers none of those three.
What autoplay actually asks of the browser
Browsers do not let a page turn on sound of its own accord. Autoplay is granted to muted video, and the element needs muted, autoplay, loop and playsinline; without playsinline a phone can take the clip fullscreen instead of playing it in place.
That is worth reading twice: a clip that starts by itself is always a silent clip. If the message lives in the voiceover, autoplay has already cut it, and you are paying the full page weight to deliver nothing.
Silent playback moves the whole load onto captions and on-screen type, which then have to stay legible over a moving background. We handle that separately, because it is solved in the layout rather than in the edit.
And autoplay is a request, not a guarantee. A low battery, a data saver, a system preference for less motion or a browser policy can decline it. The page has to look finished in the case where the video never starts at all.
Page weight, measured rather than argued about
Do not settle this from memory or from a designer's instinct. Open the network panel, switch on throttling and a mobile profile, load the page, and take down two numbers: the transferred size of the clip and the transferred size of the poster.
A video file and a single still image are different orders of thing, and the gap shows up immediately. The point of measuring is that afterwards you argue the trade with a number in your hand rather than with somebody's taste.
Two values of the preload attribute remove most of the damage. Setting it to none keeps the browser from fetching the clip until it is asked for; setting it to metadata pulls only enough to know the duration. An autoplaying hero can use neither, and that is exactly its price.
Check the slow connection separately: does the layout hold, does the poster appear, or does the visitor get a grey rectangle where the first screen should be? Test that state on purpose, because visitors find it with no effort whatsoever.
Container and codec: a file extension is not a specification
The MDN guide to media container formats draws a distinction that saves a lot of correspondence with a supplier: the container is the wrapper (MP4, WebM, Ogg, QuickTime), and the codec is how the picture and sound inside it are compressed (H.264, VP9, AV1, AAC, Opus).
Two files can both end in .mp4 and behave differently, because the same container can carry a codec a given browser does not decode. Send me an MP4 is therefore an incomplete brief, and the codec belongs in the request alongside it.
In practice that means agreeing on H.264 in MP4 for broad compatibility and, where it earns the extra encode, offering a second and more efficient version. The video element accepts several sources and the browser takes the first one it can play.
Put the codec string in the type attribute and the browser can rule a file out without downloading it. It is a small detail that matters in exactly one situation: on the visitor with the worst connection, which is the visitor you can least afford to lose.
The poster frame does more work than the video
The poster is an ordinary image, so the browser paints it before a single byte of video has arrived. On a slow phone the poster is what the visitor actually sees, and fairly often the poster is the entire experience they get.
Choose that frame deliberately. It has to read at a glance: a clear subject, room for the play control and for the headline, rather than a random middle frame with somebody caught mid-blink and a hand across the lens.
Treat the poster like any other hero image — correct dimensions, compressed, and the same aspect ratio as the clip, so that the layout does not jump at the moment playback begins and push the button out from under a finger.
And write the surrounding copy so that it stands on its own. A headline and one sentence beside the poster answer the visitor's question with no playback at all, and the video becomes evidence for the people who want evidence.
Why a filter over a playing video costs a colour pass every frame
Designers want to tint the hero: desaturate it, warm it up, blur it, drop a dark wash over the top so the headline reads. Applied in CSS over live playback, that stops being a one-time effect and becomes a running cost.
A still image can be filtered once and the result reused while nothing changes. A video hands the compositor new pixels many times a second, so the filter is recomputed for each of those frames, on the visitor's device, for as long as the clip runs.
Blur costs more than a tint, because the work grows with the radius, and a filter stacked over a full-bleed scaled video also pulls the frames off the shortest path the browser has for getting decoded pictures onto the screen.
The cure is boring and free: bake the look into the export. Your editor applies the grade once, to the file, and every visitor downloads a finished result. If you need a dark wash for legibility, a flat semi-transparent layer costs incomparably less than a filter.
Text over moving pictures is a contrast problem
Contrast is measured between the text and whatever sits behind it. Behind a video that something changes continuously, so a headline that passes on the poster frame drops out three seconds later when a bright wall enters the shot.
The W3C quick reference for WCAG 2.2 sets the contrast requirements for text, and the practical conclusion for a video background is single: you cannot rely on the footage. The type needs a constant layer that does not depend on the frame.
That layer can be a solid or gradient scrim, a colour block the headline lives inside, or simply moving the text off the video altogether so the clip becomes a panel next to it. All three are cheaper than fighting the material.
Check it honestly: stop at ten different moments in the clip and look at the headline in each one. If it disappeared even once, then for some share of your visitors it disappeared completely.
Give people a way to stop it
WCAG 2.2 asks for a mechanism to pause, stop or hide moving content that starts automatically, runs for more than five seconds and is shown in parallel with other content, and for a way to stop sound that begins without a person asking for it.
A looping hero is precisely that content. A visible pause control is the honest answer and it costs one button. It also rescues the people no requirement covers: anyone reading in transit, in a meeting, or on a plan that charges by the megabyte.
Respect the reduced-motion preference as well. Where a visitor has asked their operating system for less animation, serve the poster and skip the loop: the page still works, and you have removed the version that makes some people physically unwell.
If the clip contains speech it needs captions, and WCAG treats them as a requirement for prerecorded synchronised media rather than a nicety. A muted autoplaying hero leaves speech no channel at all except type on screen.
When a still image simply wins
Photography wins wherever the subject does not move: a product on white, a menu, a team portrait, a finished interior, a certificate, a price card. Motion adds nothing to an object that contains no motion of its own.
It wins again on pages whose job is to be found and read — a service page, a catalogue listing, a location page. Those pages need text, structure and a fast first screen far more than they need a hero clip on top of them.
And it wins when you are not prepared to maintain video. A photograph a year old still looks like a photograph. A promo clip a year old looks abandoned, because it shows last season's packaging and a phone number you have since changed.
The honest test is simple: describe in words what the clip would show. If the description fits into one sentence about an object standing still, order a photograph and spend the difference on the copy that sits beside it.
Where video earns its place
Assembly, installation and use. Anything a customer has to do with their hands is easier to show than to write, and a short clip removes a support conversation that would otherwise repeat itself every week.
Scale and space. Rooms, venues, vehicles and large objects go flat in a photograph; a slow move through them explains size in a way no wide-angle still manages, because the viewer gets a sense of how long it takes to cross.
People and trust. A person answering a question in their own words does something a testimonial in quotation marks does not, provided the recording is clean enough for the answer to be believed rather than doubted.
And motion of the product itself: fabric, liquid, a mechanism, a hinge, a fold. If what you sell is how the thing behaves, static photography is describing a different object from the one you are actually selling.
What to order, and what it costs
A single vertical piece is the Single Reel at $70, delivered in 1-2 working days with 1 round of revisions. It includes captions, a licensed track and exports for every vertical placement; shooting, scripting and actors are not included in it.
If the footage exists already and you want a set, the Reels Pack is $90 for up to 5 edits, delivered in 1-2 working days from footage delivery, with 2 rounds on the edit; filming is not part of it, because you supply the footage yourself.
When the date is fixed there is Reels Pack Express at $150: 1 working day, a 24-hour turnaround from footage, 1 round of revisions, with shooting and any licensing beyond the supplied track left outside the package.
For a hero cut with short derivatives, the Campaign Edit is $180 over 3-5 days, with 2 rounds on the cut and 1 on the grade; licensed music is not included, as the licence is purchased by you. If the site needs a flow rather than one launch, the Monthly Content Engine is $290/mo on a monthly cycle with 30 days notice to stop, the volume is agreed at the start of each cycle, and filming days and paid stock sit outside it.
Practical checklist
- Decide whether the subject actually moves before commissioning any clip.
- Replace an autoplaying hero with a poster and a play button wherever the video carries information.
- Measure the transferred size of the clip and of the poster on a throttled mobile profile.
- Ask the supplier for a named codec and container rather than just an MP4.
- Move every tint, grade and blur out of CSS and into the export.
- Add a visible pause control, captions and a reduced-motion fallback before launch.
Questions and answers
Should the hero video autoplay?
Only if it is muted, short and free of information the visitor has to read. As soon as the clip contains captions, a talking face or a sequence that matters, it moves behind a play button. Remember too that autoplay can be declined by the browser, by a data saver or by a system preference for reduced motion, so the page has to look finished without it.
What does a video for the site cost and how long does it take?
Single Reel is $70, delivered in 1-2 working days with 1 round of revisions; shooting, scripting and actors are not included. Reels Pack is $90 for up to 5 edits, delivered in 1-2 working days from footage delivery with 2 rounds on the edit, and you supply the footage. Campaign Edit is $180 over 3-5 days with 2 rounds on the cut and 1 on the grade, and the licence for music is purchased by you. Reels Pack Express is $150, 1 working day, a 24-hour turnaround from footage, 1 round. Monthly Content Engine is $290/mo on a monthly cycle with 30 days notice to stop.
Which format should I ask the supplier for?
Name both the container and the codec. As the MDN guide sets out, the container (MP4, WebM, Ogg, QuickTime) is the wrapper and the codec (H.264, VP9, AV1, AAC, Opus) is how the contents are compressed, which is why two files with the same extension can behave differently. A practical request is H.264 in MP4 for broad compatibility, with a second and more efficient encode offered as an additional source where it is worth the extra time.
Can I just put a filter on the video in CSS?
You can, but the visitor's device pays for it. A still image is filtered once, whereas a video hands over new pixels many times a second, so the filter is recomputed for every frame while the clip runs. Blur costs more than a tint because the work grows with the radius. Bake the grade into the export instead, and use a flat semi-transparent layer when the headline needs help.
Do we still need captions if the clip is silent?
Yes, for two reasons at once. A muted autoplaying hero leaves speech no channel except type on screen, and WCAG 2.2 treats captions as a requirement for prerecorded synchronised media. Separately you need a visible way to pause the motion when a clip starts by itself and runs for more than five seconds alongside other content.