A good homepage video does one job: it helps a visitor understand what you do and take the next step, without slowing the page or getting in the way. Keep it short, muted if it autoplays, light enough that it doesn't hurt your load time, readable with text on top, and controllable by the visitor. Then test it against the one action you want from the page.
That covers two different formats. A background video (a silent, looping clip behind your headline) is decoration with a purpose. A featured video (a player the visitor chooses to press) carries a message. They follow different rules, and most mistakes come from mixing them up.
TL;DR
- Choose the format first: a muted, looping background clip for mood, or a click-to-play player for a message. Don't ask one video to do both.
- Autoplay only works muted. Browsers block autoplay with sound by default, so design the clip to make sense in silence.
- Protect speed: aim for a Largest Contentful Paint of 2.5 seconds or less, use a poster image, and keep background clips small.
- Give visitors control and respect accessibility: a pause button, captions on spoken video, and no text you can't read over moving footage.
- Don't assume a video helps. Test whether it lifts or distracts from your actual goal.
Table of Contents
- Decide what the video is for
- Background video: what works
- Speed: protect your Largest Contentful Paint
- Autoplay: when it's fine and when it isn't
- Featured homepage video: make the click worth it
- Test it against your goal
- Help search engines find the video
- A pre-launch checklist
- Our perspective
- Getting the footage right
- FAQ
- Sources
Decide what the video is for
Before anyone opens an editing timeline, write one sentence: "After watching this, a visitor will ___." For a nonprofit it might be "click Donate." For a corporate team, "request a demo." For an event organizer, "check dates and register."
That sentence settles most of the other choices:
| Goal | Best format | Sound | Typical length |
|---|---|---|---|
| Set a mood, show the place or people | Background loop | Off | Short loop of a few seconds up to about 15 |
| Explain who you are or what you offer | Click-to-play player | On, with captions | Short enough to hold attention; see our guide to promo video length |
| Show impact to donors or members | Click-to-play player or recap | On, with captions | Usually under two minutes |
| Sell a product | Product demo, linked from the hero | On | Depends on complexity |
If you're unsure what story to tell, our guide to a company overview video walks through what to include. For picking a single outcome and platform first, see our video content strategy article.
Background video: what works
Background video is the most searched version of this topic, and it's easy to get wrong. A few rules hold up.
Keep it short, silent and quiet in motion
Use a loop of roughly 6 to 15 seconds, muted, with no spoken content. Pick footage with slow, subtle movement: hands working, a room filling with people, light on a building. Fast cuts and jarring edits distract from your headline and can be uncomfortable for some viewers.
The loop point matters. If the first and last frames don't match, the clip visibly jumps every few seconds, and that looks cheap. Ask your editor to build the loop deliberately, with a slow dissolve or a camera move that returns to its start.
Show clips, not brand films
A brand film told in 90 seconds of narrative doesn't work as wallpaper. Use b-roll: three to five short clips that each read at a glance. Save the story for a featured player further down or on an about page.
Make text readable
Place your headline over the calmest part of the frame, add a dark overlay (a semi-transparent gradient is usually enough), and check contrast on a phone outdoors, not just on your monitor. If the video is competing with the call to action, the video loses.
Use the right attributes
For a background clip, the standard setup is autoplay, muted, loop and playsinline. Browsers will only start autoplay when the video is muted, and on iPhones playsinline keeps the clip from jumping to fullscreen. Our developer-focused article on fast, accessible video embeds has production-ready code for these.
Web.dev's video performance guide notes that autoplay is the right tool when a video must start immediately, such as a background or a replacement for an animated GIF. Everywhere else, leave control with the visitor.
Speed: protect your Largest Contentful Paint
The video is often the biggest thing on the first screen, so it can set your page's LCP. Google's definition of LCP covers the largest image, text block or video visible in the viewport, and the target for a good experience is 2.5 seconds or less, measured at the 75th percentile of page loads. That means your slowest quarter of visits still has to be acceptable, which usually means mobile on a mediocre connection.
What to do about it:
- Compress hard. A background clip doesn't need to be 4K. Strip the audio track, keep it at 1080p or below, and aim for a file size measured in a few megabytes, not tens.
- Use a poster image. The poster shows while the video loads. Make it a real frame from the footage so the swap to playback doesn't flash. Web.dev suggests choosing a representative frame rather than a black placeholder if testing shows the black one makes the transition jarring.
- Reserve the space. Define the aspect ratio so the layout doesn't shift when the video replaces the poster.
- Don't preload what nobody asked for. For a click-to-play player, use
preload="none"ormetadata, and lazy-load the player below the fold. Web.dev's guidance on lazy loading video explains howpreloadsaves bandwidth for videos that don't autoplay. - Consider turning it off on small screens. Many teams serve the poster image only on mobile or when a visitor has data-saver on. The page still looks designed, and it loads faster where it matters.
If a landing page is the real target, our article on keeping landing pages fast with brand video goes deeper.
Autoplay: when it's fine and when it isn't
Autoplay isn't forbidden, but it has conditions.
- It must be muted. Otherwise most browsers stop it. Web.dev says to use autoplay sparingly and to always include the
controlsattribute on players so visitors keep control. - It needs to be stoppable. Under the W3C's accessibility guidelines, moving content that starts automatically and lasts more than five seconds needs a way to pause, stop or hide it, and the criterion exists because continuous movement can distract people with cognitive disabilities and attention deficits. A small pause button in a corner of the hero satisfies this for a typical background loop.
- It should respect reduced-motion settings. Many operating systems let people request less motion. In CSS, the
prefers-reduced-motionmedia query lets you swap the clip for the poster image for those visitors. - It shouldn't carry the message alone. If the key information is spoken, an autoplaying muted clip won't deliver it. Put the message in text, or use a featured player with captions.
In short, autoplay is a good fit for a calm background loop and a poor fit for a story that needs audio.
Featured homepage video: make the click worth it
When the video is the content, treat it differently.
Put it where people look. Place it above the fold or just under your headline, large enough to watch comfortably, not tucked in a sidebar.
Lead with the value. The first five seconds should say who it's for and what they'll get. For a nonprofit, that might be a person and a result, not a logo animation.
Caption everything spoken. Many people watch with the sound off, and captions help viewers who are deaf or hard of hearing. Burned-in captions are fine for short clips; for longer ones, use a caption file so the text is searchable and adjustable.
Give it a good thumbnail. With preload="none", the poster is all visitors see before pressing play, so it needs to be sharp and show a human face or a clear scene. A weak poster means a weak play rate.
End with a next step. A video that finishes and leaves the visitor with nothing to click wastes the attention it earned. Add a button or a link in the final seconds or right beside the player.
Match length to the job. A value-proposition video can be brief. A donor impact video can run a little longer. Anything longer belongs on its own page, not the homepage.
Test it against your goal
The uncomfortable truth is that a video can lower conversion. Conversion specialists at Do What Works point out that adding a video isn't a universal win: you have to check whether the player helps or distracts from goals like newsletter signups or demo requests.
A simple test plan:
- Pick one primary action (donation click, form start, call).
- Run the page with the video against the page with a still image, with everything else equal.
- Compare the action rate and page speed, not just views of the video.
- Segment by device. A background loop that helps on desktop can hurt on a phone.
- Run it long enough to cover your normal weekly traffic pattern.
If you need a refresher on structuring experiments, this guide to A/B testing in advertising covers the logic of comparing variants and reading results. Low-traffic sites should be careful: small differences need a lot of visits to be real, so favor big, clear changes over minor tweaks.
Help search engines find the video
If the homepage video is a featured player, mark it up. Google says pages with video can use VideoObject structured data, and it must include at least the name, thumbnail URL and upload date to qualify for rich results. Use a real thumbnail file that Google can fetch, and keep the description honest.
Purely decorative background loops don't need this. Their job is visual, not search.
A pre-launch checklist
- One sentence goal written down, and a primary call to action visible without scrolling.
- Background loop: muted, 6 to 15 seconds, no audio track, loop point checked, compressed.
- Poster image: a sharp frame from the footage, with set dimensions.
- Pause control for any autoplaying motion, and a reduced-motion fallback.
- Captions on every video with speech.
- Text over video checked for contrast on a phone.
- LCP measured on mobile before and after adding the video.
- A test plan with a stated winner metric.
Our perspective
We make video for nonprofits, corporate teams, small businesses and event organizers, and the homepage questions we hear most are about the footage, not the code. Our view is that the best homepage video is the one a visitor can understand in silence in three seconds and then, if they want more, a full story one click away.
That's why we plan the web and the video together. A hero loop shot without knowing where the headline will sit usually ends up cropped or covered. A donor story filmed without captions in mind can lose half its audience. When we shoot a client's event or interview, we often capture a few slow, loop-friendly b-roll clips for the homepage in the same session, so the site and the main video feel like the same brand.
We'd also say: don't let a good-looking reel talk you out of testing. The point is results, whether that's fundraising, signups or registrations, and a plain still image sometimes wins. A video earns its place on your homepage by working.
— Bo
Getting the footage right
The technical rules above are the easy part. The harder part is footage that holds up at small file sizes and works as a loop, a hero or a featured story. Our video production team in Kansas City produces promotional videos, recap videos, highlight reels and brand assets, and offers content retainer packages for teams that need a steady supply of clips for their site and social channels. If you want the site rebuilt around the video, our web builds page explains that option. Pricing isn't published, so reach out with your goal and timeline.
FAQ
Should a homepage video autoplay?
Only if it's a short, muted, silent-friendly loop that visitors can pause. Browsers block autoplay with sound in most environments, and moving content that runs more than five seconds needs a way to stop it. For a message-driven video, use a click-to-play player instead.
How long should a background video be?
A loop of roughly 6 to 15 seconds is a common range, as long as the file stays small and the loop point is clean. Shorter clips load faster, but a very short loop can look repetitive. Test it on a phone before you decide.
Will a homepage video slow my site?
It can, because video can be the largest element on the first screen and affect Largest Contentful Paint. Compress the file, use a poster image, set the dimensions and lazy-load anything below the fold. Measure before and after.
Do I need captions on a homepage video?
Yes, for any video with speech. Many visitors watch without sound, and captions help people who are deaf or hard of hearing. A purely visual background loop with no speech doesn't need them, but it does need a pause control.
Does a homepage video improve conversions?
Not automatically. Whether it helps depends on your audience and goal, so compare the page with and without it against a single action such as a donation or demo request.
Sources
- Largest Contentful Paint (LCP), web.dev
- Audio and video, web.dev
- Video performance, web.dev
- Lazy loading video, web.dev
- Video structured data, Google Search Central
- Understanding SC 2.2.2: Pause, Stop, Hide, W3C
- Do videos on home pages work?, Do What Works