We used to let headlines and phone numbers ride inside video files. Then we wrote the rule down: that kind of text belongs in code, where a crawler and a screen reader can both read it. Nothing a visitor has to tap or a crawler has to read goes inside a frame anymore.
Should you put a video on your business website? Yes, when the motion is something only footage can show, like the work itself or a person explaining it. Never as the only place a word, a number or a phone link lives.
The short answer
- A video belongs on a service page only when the motion needs real footage or a renderer.
- Every word or number that has to be read, tapped or found stays in the page, not the clip.
- A video that repeats the page is decoration.
Before and after
Example- Baked into a frame
- Lives in the markup
Inside the clip
- A headline animates inside the video file Cut: Nothing to select
- The phone number scrolls across the last few seconds of the clip
- Colors come from whatever template the video started from
In the page
- The same headline animates in CSS, inside the page itself
- The phone number is a real link, tappable and easy to change
- Colors are pulled from the site's own design tokens
Nothing a visitor has to tap or a crawler has to read goes inside a frame anymore.
Why the words stay in the page, not the frame
Text inside a video is unreliable for two audiences at once: search engines and screen readers. Both work from the page's text. A crawler cannot be counted on to read words drawn into moving pixels, and a screen reader cannot read them at all, so a headline rendered only inside a clip may reach neither one. Google's guidance makes a related point about a simpler case, image alt text. It "improves accessibility for people who can't see images on web pages, including users who use screen readers," and a video frame with no text equivalent fails exactly the test an image without alt text would fail.
CSS animation does not have that problem. It renders the words a static page would, so nothing gets lost when the motion runs. The page stays light too, since a CSS animation weighs almost nothing next to a video the browser has to buffer before it plays.
We hold our own pages to that rule. A headline or a phone number on our site lives in the page's markup, never inside a rendered clip, because we tell a client to build it that way too. A phone number baked into a clip reads like a hurried social ad, and that alone is reason enough to keep it out. Text in markup still has to fit a small screen, so we also test a site on phones before it ships.
The motion that earns a video slot
A video earns its file size when the motion needs footage or a renderer. Three cases qualify: real footage of the work, such as a door riding up its track or a crew on a job; a person, such as an owner explaining a repair in their own voice; and rendered physics or depth, such as a collision or a 3D scene, where an imitation would look fake. CSS handles a lot of motion well. A slow gradient shift is a basic CSS animation, and CSS can tie an animation to how far the page has scrolled instead of to the clock (MDN's guide to scroll-driven animations), so planes drifting at different speeds as a visitor scrolls are within its reach. When CSS can do it convincingly, a video is extra weight.
-
Footage of the work on a real job Where it belongs A video
Footage of the work on a real job Why Real work cannot be drawn convincingly -
A person explaining, face and voice Where it belongs A video
A person explaining, face and voice Why The trust comes from seeing and hearing them -
Rendered physics or a 3D scene Where it belongs A video
Rendered physics or a 3D scene Why A CSS imitation of a collision looks fake -
A slow gradient shift Where it belongs CSS in the page
A slow gradient shift Why A basic animation that weighs almost nothing -
Planes drifting as the page scrolls Where it belongs CSS in the page
Planes drifting as the page scrolls Why Scroll-driven animations already do it
The three cases that earn a video slot, against two kinds of motion CSS already does well.
Animated text is not one of the three cases, no matter how well it renders. It is the motion that reads best done in plain code, since code gets the search and accessibility benefit for free and a video file never will. Run that short list before a single frame of a video production project gets rendered.
The colors follow one discipline. A generic template ships with its own palette, and it rarely matches a real business's own blue or green. We pull the exact values from the site's design tokens instead, the file the rest of the page already reads from, as we do in all our web design work, so nothing on the page looks like it came from two different companies.
The quick test before a video ships
A finished video still has to clear four questions before it goes anywhere near a page. A single no sends it back to the page as ordinary markup instead, and that is not a downgrade. Markup was usually the better choice from the start. Asking the hard question before anything ships is the habit behind our pre-mortem before committing to a plan, applied to a single clip.
The quick test
-
Which of the three cases does the motion fall into?
Footage of the work, a person, or rendered physics or depth. If it is none of them, CSS can handle it instead.
-
Does every word and number already live in the page?
A phone number belongs in a link, not a frame, so it stays tappable and easy to update.
-
Do the colors come from our design tokens?
Not a generic default. A mismatched palette undermines a page more than no video would.
-
Does the video add something the page does not already say?
Read the page with the video muted and covered. If nothing is missing, the video is decoration.
The common failure is a slow zoom on a stock photo, or the hero's sentences set in motion. Neither adds anything the page did not already say. Both add a file the browser has to load first. More is not better here, the same way longer service pages do not rank better just for being longer.
A video earns its file size when the motion needs footage or a renderer.
A video that plays on its own carries one more duty. The accessibility guidelines ask that moving content which starts on its own, runs longer than five seconds and sits beside other content gives the visitor a way to pause, stop or hide it (WCAG 2.2, the web accessibility standard).
We hold a video to the brief we hold a headline or a color choice to: it earns its keep or it does not ship. If you are weighing a video for your site and want a second opinion before it gets rendered, send us a note and we will run it past those four questions.
Before a video goes on your page
Talk to Offer before you decide anything.
You'll talk with Offer, not a sales rep. A short call, no pitch deck.
Talk to OfferThis post was drafted with AI tools from our own project records, anonymized, and checked by us before it published. Read our editorial standards.
