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. Neither one can read a video file. Nothing a visitor has to tap or a crawler has to read goes inside a frame anymore.
The short answer
- A video belongs on a service page only when it moves in a way CSS cannot.
- 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.
Why the words stay in the page, not the frame
Text inside a video is invisible to two audiences at once: search engines and screen readers. Both work from the page's text, and neither one can parse pixels moving inside a rectangle, so a headline rendered only inside a clip reaches 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.
The motion that earns a video slot
Three cases justify a video's file size: real physics such as spring, gravity or a collision, layered depth with more than one plane drifting at a different speed, or an ambient atmosphere like a slow gradient shift or a drift of grain. CSS can fake a lot of motion. It cannot do those three.
Animated text is not one of the three cases, no matter how well it renders. It is the one motion that reads better done in plain code, since code gets the search and accessibility benefit for free and a video file never will. That is the short list we work from on every video production project, before a single frame gets rendered.
Captions on a spoken video are a different matter. They run under the audio, and the page's own words stay right where they are, so the rule above does not touch them.
Before
- A headline animates inside the video file
- The phone number scrolls across the last few seconds of the clip
- Colors come from whatever template the video started from
After
- 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
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, 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.
The quick test
-
Which of the three cases does the motion fall into?
Physics, layered depth or ambient atmosphere. 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.
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.
This post was drafted with AI tools from our own project records, anonymized, and checked by us before it published. Read our editorial standards.
