The short answer
A film at the top of your home page works when it’s short, muted, quick to show something, easy to pause, and not the only place your main message lives. Give it a still poster image so the page never shows a black box, compress the file, and don’t load it until it’s needed. Add a pause button, respect visitors who’ve asked their device for less motion, and offer the full film with sound and captions as a separate choice.
A film at the top of your website can show a visitor in five seconds what a paragraph takes a minute to say. Done badly, it shows a black rectangle, blares sound in an open-plan office, and pushes your phone number below the fold. The difference is mostly in a handful of technical choices, which this article walks through in plain English. Pass it to whoever looks after your site if you don’t do it yourself.
1. The message goes in text, not only in the film
Start with the thing that has nothing to do with video. Your headline, what you do, where you work and how to get in touch should be in real text on the page, visible without pressing play.
Some visitors won’t play the film. Some are on slow connections, and some use screen readers. The film should support the message, not carry it alone.
2. Sound off by default
Browsers decide this for you. Google’s Chrome autoplay policy says “muted autoplay is always allowed”, while autoplay with sound is allowed only in certain cases, such as when the visitor has already interacted with your site. Apple’s WebKit, the engine behind Safari, lets muted videos autoplay without a tap, and pauses a video that gains sound without one.
So a film that autoplays at the top of a page has to be muted. Design for that:
- choose a film, or a cut of it, that makes sense without sound;
- burn any essential words into the picture, or skip them in the loop;
- offer a clear “watch with sound” button that opens the full film.
3. Speed: show something straight away
A film is a large file next to a page of text. Four habits keep it from slowing the page down.
A poster image. A still frame shown until the film is ready. web.dev, Google’s web performance guide, recommends the poster attribute so the space is filled while the video loads. Choose a strong frame, not a blurry one from the first second.
Don’t load the whole file up front. For a film that doesn’t autoplay, web.dev recommends preload="none" with a poster, so the film downloads only when someone presses play. For a short muted loop that does autoplay, it recommends autoplay muted loop playsinline, and lazy loading so the loop starts only when it scrolls into view. playsinline matters on iPhone, where it lets the film play in the page rather than jumping to full screen.
Compress it. A background loop doesn’t need to be cinema quality. A short, compressed loop for the top of the page, with the full-quality film kept for “watch with sound”, is a sensible split.
Test it. Run your page through PageSpeed Insights before and after. One of the main measures is Largest Contentful Paint (LCP), how long the biggest element takes to appear. For a video, web.dev says LCP uses whichever comes first, the poster image or the first frame, and that sites should aim for 2.5 seconds or less. A well-chosen, well-compressed poster helps directly.
4. A pause button, and less motion for those who ask
Moving content can make the rest of a page hard to read.
WCAG 2.2, the web accessibility standard, covers this in Success Criterion 2.2.2 (Pause, Stop, Hide, Level A). For moving content that starts automatically, lasts more than five seconds and plays alongside other content, there must be a way to pause, stop or hide it. A home page loop meets all three conditions, so it needs a visible pause button that works with a keyboard as well as a mouse.
Many people also turn on a “reduce motion” setting on their phone or computer. Websites can detect it through a feature called prefers-reduced-motion, which tells the site the visitor has asked to minimise non-essential motion. Respect it: show the poster image instead of the loop.
5. Captions on the full film
The muted loop is decoration. The full film, with a voiceover, is content, and WCAG 2.2 Success Criterion 1.2.2 asks for captions on prerecorded video with sound. Provide a caption file (usually .vtt) for the full film, switched on by default if you can.
6. A short loop up top, the full film further down
A pattern that works on most small-business sites:
- At the top: a silent loop of a few seconds, with a poster, a pause button and your headline in text over or beside it.
- Nearby: a clear button, “Watch the film (with sound)”, that opens the full version with captions.
- Further down: the full film again, embedded properly, for visitors who scroll rather than click.
Bazel Minerals, BP Recycling Solutions and Bowness Retreats all play their films on their own websites, each handled a little differently, if you want to see real examples.
7. Where the file lives
You have three broad options.
| Option | Good | Watch out for |
|---|---|---|
| YouTube embed | Free, and YouTube handles playback | YouTube branding; suggested videos at the end (with rel=0, they come from your own channel); ads can be served on embedded videos. Privacy-enhanced mode (youtube-nocookie.com) reduces tracking |
| Vimeo or another video host | An alternative player to YouTube’s, with branding options that depend on the plan | Plans, prices and limits vary; check them before you commit |
| Self-hosted (on your site or a storage service) | Full control, no other branding, ideal for silent loops | You handle compression, file sizes and caption files yourself |
For a silent background loop, self-hosting is usually simplest. For the full film, any of the three can work. Pick the one you or your web person can manage.
A quick checklist
- Main message in text, visible without playing anything.
- Loop muted, short and with
playsinline. - Poster image chosen and compressed.
- Full film loads only when needed.
- Pause button that works by keyboard.
- Reduced-motion setting respected.
- Full film has captions.
- PageSpeed Insights checked before and after.
If you’d rather not make it yourself, a VideoWorks film comes with code to put it on your website, and if your website is built by SiteWorks, your film can play right on your pages. See pricing for what’s included.
