A working filmmaker's guide to homepage background video: what it does, how long it should run, file size limits, accessibility rules, and when a still image wins.
Homepage Background Video: How to Plan, Shoot, and Add One
A homepage background video is a short, silent, looping clip that plays behind your headline and navigation. Its job is to set mood in the first few seconds, not to explain your services. Keep it under 20 seconds, keep the file small, and give visitors a way to pause it.
Simchon ProductionsMake Your Homepage Video ResonateSimchon Productions creates cinematic films with authentic storytelling, helping organizations connect with audiences through focused, emotionally resonant visuals.Explore video production
TL;DR
A background video sets tone and emotion. Your headline and button still do the selling.
Baylor University’s web guidance says to keep the clip to 20 seconds or less and under 20 MB.
Show real people, not only buildings. Make the loop seamless, with no fade to black.
Autoplay motion lasting more than five seconds needs a pause or stop control under WCAG.
If the video slows the page or hides the call to action, use a still image instead.
Table of Contents
What is a homepage background video?
What can a background video say that a photo cannot?
What should a background video not try to do?
How long and how large should the video be?
What footage works best for a homepage background video?
How do you add a video to your homepage background?
What accessibility rules apply to a background video?
Will a background video slow down your website?
When is a still image better than a background video?
What does a strong background video look like in practice?
How do you test a homepage background video before launch?
What is our perspective on homepage background video?
Can Simchon Productions produce your homepage background video?
FAQ
Sources
What is a homepage background video?
A homepage background video is a usually soundless video placed behind a page’s text and navigation, and it is often the first thing a visitor sees. Shopify’s guide to background video describes it as a way to reinforce the brand message.
Think of it as a moving version of the hero image. The visitor does not press play. The clip starts on its own, loops, and stays quiet.
You may also hear it called a hero video, a video header, or a video banner. They all mean the same thing: motion behind your main message.
What can a background video say that a photo cannot?
A background video can show feeling, pace, and place in a way a single photo cannot. Baylor University’s background hero video guidance notes that video can display visual information that would be hard to convey in one image or a short summary.
Here is what that looks like for the organizations we work with:
A senior living community: a resident laughing with a nurse in the garden, then a daughter holding her mother’s hand.
A private school: students arriving on a fall morning, a teacher leaning over a desk, a quiet moment in the library.
A university: a lab, a quad, a professor mid-conversation with a student.
A nonprofit: the people you serve, in their own space, doing ordinary things with dignity.
A home health agency: a caregiver and a client sharing a kitchen table.
Notice what these have in common. None of them list services. They show who you are and who you serve. That is the right job for this format.
What should a background video not try to do?
A background video should not explain your programs, prices, or process. Duda’s guidance on website video backgrounds recommends using the video to establish mood, and leaving detailed explanations for deeper pages.
I see this mistake all the time. A team crams a two-minute story into the hero. The clip has voiceover, titles, and a logo sting. Visitors scroll past it in three seconds.
Split the work instead:
Background video: mood, in 10 to 20 seconds, no sound.
Headline and button: the promise and the next step.
A separate film, on click: the full story, with sound and captions.
If you want the full story film, that is a different project. We cover that kind of work in our video production portfolio.
How long and how large should the video be?
Keep the clip to 20 seconds or less and the file under 20 MB. That is the specification in Baylor University’s hero video guidance, and it is a good working target for any organization.
Here is a simple spec sheet we use as a starting point:
Item | Target |
|---|---|
Length | 10 to 20 seconds |
File size | Under 20 MB |
Audio | None (remove the track) |
Loop | Seamless, no fade to black |
Shot pace | Slow, steady movement |
Fallback | A poster image, always |
Remove the audio track completely, even if the video is muted on the page. MDN’s video performance guide says dropping the audio track from a muted background video can save 20% of bandwidth.
That saving matters on phones. Many of your visitors, including parents and adult children searching for care, will be on mobile data.
What footage works best for a homepage background video?
The best footage is slow, human, and tied to what your organization is trying to achieve. Baylor’s guidance says to start from your strategic objectives, include people as well as places, use pacing slow enough to add detail without distracting, and design the clip to loop without fading to black.
Use this checklist when you plan the shoot:
Start with one goal. Enrollment, donations, caregiver hiring, or admissions inquiries. Pick one.
Name the viewer. A parent touring schools thinks differently than a donor reviewing an annual report.
Shoot people first. Faces create trust faster than architecture.
Use slow camera moves. A gentle push-in or slider move works. Fast whip pans do not.
Leave space for text. Frame the shot so the headline sits over a calm area, such as sky, wall, or soft background.
Plan the loop. The last frame should flow into the first frame. Match the action and the light.
Get releases. Anyone who appears, especially residents, students, or patients, needs a signed release. Healthcare and school settings may add their own privacy rules, so check with your compliance lead before you film.
If you are planning a clip like this for your own site, a guide on planning a website hero video can help you think through how the clip fits the rest of the page.
How do you add a video to your homepage background?
You add it with the HTML5 video element, plus a poster image. The usual attributes are autoplay, loop, muted, and playsinline. Gradiently’s video background guide recommends this set for compatibility across browsers and devices.
The poster image matters. It shows while the video loads, and it shows if a browser blocks playback, for example under power-saving mode. Without it, visitors may see a blank box.
If you use a website builder, you often do not need code. Most builders have a “background video” setting on the hero section. Upload the compressed file, add the poster, and check the result on a phone.
A note for your web developer: the W3C recommends using the autoplay attribute rather than scripts to start playback, so users can override it, including people using screen readers. See the W3C’s technique F93.
What accessibility rules apply to a background video?
Autoplay motion that lasts more than five seconds must come with a way to pause, stop, or hide it. That is WCAG success criterion 2.2.2, a Level A requirement. A looping background video lasts longer than five seconds, so it needs a control.
Western Washington University’s accessibility guidance adds useful detail:
Autoplaying background video can distract visitors with attention-related disabilities or vestibular disorders.
It can interfere with screen-reader audio.
Depending on the content, you may still need alt text, audio descriptions, transcripts, or captions.
A static hero with text over it may communicate just as well and is easier to make accessible.
This matters for the audiences you serve. Senior living families, university applicants, and public-sector donors include many people who rely on assistive tools. Universities and healthcare organizations may also face their own accessibility obligations, so ask your counsel or compliance team what applies to you.
Practical steps:
Add a visible pause button on the hero.
Respect the visitor’s reduced-motion setting, and show the poster image instead of the video.
Check text contrast against the video. Dark overlays help, and the headline must stay readable on every frame.
Put any real information in text on the page, not only in the footage.
Will a background video slow down your website?
It can, if the file is large. Gradiently’s guidance on performance is to compress the file and keep it short, because heavy files hurt load time and the visitor experience.
The fix is not complicated. Compress the export, strip the audio, and keep the length near 10 to 20 seconds. Then test on a real phone on a normal mobile connection, not only on office Wi-Fi.
Some marketing blogs claim big lifts in time on page or conversion when a page has video. Treat those numbers with care. They depend on the page, the audience, and the offer. Test your own page and compare the results before and after.
When is a still image better than a background video?
A still image is better when video slows the site, adds nothing, or pulls attention from your call to action. SitePoint’s article on moving backgrounds says motion works for setting a tone, conveying a lifestyle, or drawing an emotional reaction, and that you should use a static image with text when video is unnecessary.
Use this quick decision table:
Situation | Better choice |
|---|---|
You have strong, human footage and a fast site | Background video |
Your audience is mostly on slow connections | Still image |
Your homepage already has a lot of text and buttons | Still image |
You only have stock footage that could belong to anyone | Still image, or invest in real footage |
You have a story film with sound | Embedded player, click to play |
One more point. Generic stock footage of smiling people in a lobby does little. Visitors have seen it a hundred times. Real footage of your own staff, students, or clients carries trust that stock cannot.
What does a strong background video look like in practice?
A strong background video usually has one idea, three or four shots, and a calm rhythm. Here are patterns that work for the sectors we serve, described by type.
Senior living. Open on morning light through a window. Cut to a resident and a caregiver sharing a quiet laugh. End on a family walking through a hallway. The viewer thinks: someone here knows my mother’s name.
Private K-12 school. Show a classroom moment, a hallway, an athletic field, then a teacher’s face. Keep each shot four to five seconds. The viewer thinks: my child would be seen here.
University. Mix campus life with a close shot of a student working. Add a little depth with a slider move. The viewer thinks: I can see myself here.
Nonprofit. Show the people your work touches, filmed with respect, and the volunteers beside them. Avoid pity shots. The viewer thinks: this work is real, and I want to help.
Home health agency. A caregiver arrives at a home. A client greets them at the door. The viewer thinks: I would let this person in.
For more on how video builds trust in care settings, see our posts on why cinematic video builds patient trust and video content types that attract home health clients.
How do you test a homepage background video before launch?
Test it on a phone, on a slow connection, with a screen reader, and with reduced motion switched on. Do this before you publish, not after.
A short launch checklist:
Play the loop 10 times. Does the cut feel smooth?
Read the headline over every second of footage. Is it legible?
Load the page on mobile data. Does the headline and button appear first?
Turn on reduced motion. Does the poster image show?
Tab to the pause button with the keyboard. Does it work?
Check the file size against your target.
After launch, watch your inquiry form submissions, tour requests, or donation clicks for a few weeks. If they drop, change one thing at a time.
What is our perspective on homepage background video?
We treat the background video as the first frame of your story, not the whole story. A good one earns about ten seconds of trust and then hands the visitor to your headline, your button, and your longer films.
We shoot for organizations where trust comes before everything else: nursing homes, private schools, universities, nonprofits, and healthcare agencies. In those settings, the viewer is often a worried parent, a donor deciding where to give, or a family choosing care. They are not looking for effects. They are looking for proof that real people are cared for here.
That is why we start with the audience, not the camera. We define who the viewer is and what they need to feel, then plan shots that deliver that feeling in plain, honest frames. The post-production pass matters just as much. Pacing, color, and the loop point decide whether the clip feels calm or cheap.
Quality is the floor, not the deciding factor. A beautiful clip that does not connect with the right viewer still fails. A simpler clip with real faces and a clear purpose will beat it.
— Tzvi Simchon
Can Simchon Productions produce your homepage background video?
Yes. We are a New Jersey video production company serving organizations across the tri-state area. We make brand films, nonprofit videos, school videos, healthcare videos, event films, and documentary-style content, and a short looping hero clip can come out of the same shoot as a longer film.
That approach saves budget. One day on location can give you the background loop, a full brand film, and social cuts. Pricing depends on project scope, so we quote each project individually.
If you are comparing options, our guide on how to hire a video production company lists what to ask. When you are ready to talk, visit Simchon Productions and tell us who your viewer is.
FAQ
What are background videos called?
They are most often called hero videos, video backgrounds, or background videos. Some designers say video header or video banner. All of these mean a muted, looping clip behind the main text of a page.
Should a homepage background video have sound?
No. Background videos should be silent. Browsers often block autoplay with sound, and unexpected audio frustrates visitors. Removing the audio track also reduces file size. MDN says it can save 20% of bandwidth on a muted background video.
How long should a homepage background video be?
Ten to 20 seconds is a solid range. Baylor University’s guidance sets 20 seconds or less and under 20 MB. The loop should be seamless so visitors do not notice where it restarts.
Do background videos hurt accessibility?
They can. Autoplaying motion that lasts more than five seconds needs a pause, stop, or hide control under WCAG 2.2.2. Add a visible pause button, honor reduced-motion settings, and place important information in text on the page.
Is a background video better than a still image?
Only when the footage is strong, the file is light, and the video supports your call to action. If the clip slows the page or competes with your headline, a still image with clear text is the better choice.
Sources
Recommended Background Hero Video Specifications (Baylor University)
Let users pause/stop/hide animation (Western Washington University)
Moving Backgrounds: When, Why, and How to Use Them (SitePoint)