Website hero video: how to add a background clip without slowing the page

A hero video is the looping clip behind the top section of a web page. It can make a site feel alive. It can also add several megabytes to a page, push your main image back by seconds, and fail to play on the phones most of your visitors use. This page is the motion companion to website hero image: stock, photographer or AI, which covers stills. Here the focus is encoding, autoplay, the poster image, accessibility and a speed test. If you want an AI-made loop, I mention Higgsfield, a web platform that makes video clips from text or a still picture, and I say when real footage or a still image is the better choice.

This page may contain affiliate links from which Blur Studio earns commissions.

Do you need a hero video at all

Answer these in order. Stop at the first "no".

1. Do you have a clip that shows something real? Your workshop, your truck pulling up, a pour at your cafe, hands at work. If not, a still image is likely better, see the alternatives section.
2. Is your site already fast on a phone? If a mobile speed test already shows trouble, fix the images first. A video will make it worse.
3. Is most of your traffic on phones? Many phones will not play the loop (see the iPhone section), so the poster image does the real work. A video is then an extra for desktop visitors only.
4. Will the video help someone decide to call or book? Decoration alone is a weak reason.

If you answered yes four times, go ahead, but design the poster image first and treat the video as an upgrade on top of it.

The size budget: file, length, resolution, audio

Start with a page weight budget, not a video. A hero video of 5 MB can be bigger than the rest of a simple page put together. Write a number down, for example "the top of the page must stay under 2 MB on a phone", and fit everything inside it. Video is a heavy kind of file: the web documentation site MDN says video is about 25% of the average site's bandwidth.

These numbers are rules of thumb from institutions and vendors, not web standards. Use them as a starting point:

Setting	Starting point	Where it comes from
Length	5 to 15 seconds	Swarmify (vendor) says 10 to 15; Western Kentucky University web standards say under 10
File size	Under about 5 MB	Both of the above
Resolution	720p (1280 pixels wide)	Both; a background is blurred and small on screen
Frame rate	24 frames a second	Cloudinary and Swarmify
Audio	None, remove the track	MDN says removing audio from a muted video saves about 20%

Compression can shrink a raw clip a lot. Cloudinary reports 58 MB down to 1.1 MB for one test clip, and ImageKit reports 63.76 MB down to 0.99 MB in its example. Those are single examples from companies that sell video delivery, so your result will differ.

Step by step: make, trim, loop, compress

1. Pick a calm clip. Slow movement, one subject, no fast cuts and no text in the frame. Fast motion compresses badly and distracts from your headline.
2. Trim to 5 to 10 seconds. Choose a start and end that look alike so the loop does not jump. A slow ping-pong (forward then backward) or a short cross-fade at the join hides the seam.
3. Export without audio. Do it at export, not just with the muted attribute on the web page.
4. Compress. Free tools such as HandBrake or ffmpeg work. Swarmify suggests a quality setting (CRF) of 24 to 28 in HandBrake; treat that as a starting range and lower quality until the picture starts to look poor, then step back.
5. Make two files. A WebM version and an MP4 version. MDN says to list the smallest source first, and its example puts WebM first because that file is smaller. Check browser support on a site such as caniuse.com before you drop either one.
6. Make the poster. Grab one good frame, resize it to the same shape as the video, and compress it as a WebP or JPEG.

Example ffmpeg commands for a developer or a confident owner. They are starting points; change the numbers and check the result by eye:

# MP4, 8 seconds, no audio, 1280 wide, 24 fps
ffmpeg -i source.mp4 -t 8 -an -vf "scale=1280:-2,fps=24" -c:v libx264 -crf 26 -preset slow -pix_fmt yuv420p -movflags +faststart hero.mp4

# WebM version
ffmpeg -i source.mp4 -t 8 -an -vf "scale=1280:-2,fps=24" -c:v libvpx-vp9 -crf 34 -b:v 0 hero.webm

# Poster: one frame from the MP4
ffmpeg -i hero.mp4 -frames:v 1 hero-poster.jpg

The flag -an removes the audio track. The flag -movflags +faststart lets the MP4 start playing before it has fully loaded.

The markup that works on phones

For autoplay to work in modern browsers, the video needs to be muted, and on iPhones it also needs to play inline instead of opening full screen. MDN lists these together: autoplay, loop, muted and playsinline. The simplest version looks like this:

<video autoplay muted loop playsinline preload="metadata"
       poster="hero-poster.jpg" width="1280" height="720">
  <source src="hero.webm" type="video/webm">
  <source src="hero.mp4" type="video/mp4">
</video>

That works, but phones still download the video. A better pattern, which I would hand to a developer, shows a normal image first and adds the video only on wide screens for people who have not asked for reduced motion:

<div class="hero">
  <img class="hero-img" src="hero-poster.jpg" width="1280" height="720" alt="">
  <video class="hero-video" muted loop playsinline preload="none"
         data-webm="hero.webm" data-mp4="hero.mp4" aria-hidden="true"></video>
  <button type="button" class="hero-pause" hidden>Pause background video</button>
</div>

<script>
var v = document.querySelector('.hero-video');
var wide = window.matchMedia('(min-width: 768px)').matches;
var calm = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (wide && !calm) {
  v.src = v.canPlayType('video/webm; codecs="vp9"') ? v.dataset.webm : v.dataset.mp4;
  v.play().then(function () {
    document.querySelector('.hero-pause').hidden = false;
  }).catch(function () { /* blocked: the image stays */ });
}
</script>

Why this shape: the image carries the page on every device, the video is added only where it makes sense, and if the browser blocks playback the visitor still sees a good picture. The video sits on top of the image with simple styling (position and size), and you wire the pause button to call pause() and play() on the video. This is a sketch for a developer to test.

Avoid using a YouTube or Vimeo embed as a background. Those players load their own scripts and show their own controls and branding, and Swarmify's guide also warns against YouTube embeds for this job.

What iPhone Low Power Mode and reduced motion do to your video

• iPhone Low Power Mode. ImageKit reports that Low Power Mode blocks autoplay and that no code overrides it. That is a vendor claim, widely repeated, so test on a real iPhone with Low Power Mode switched on. The practical result is the same either way: some visitors will see only the still image, so the still image must be good.
• Reduced motion. Some people set their device to reduce animation, because motion makes them dizzy or ill. Browsers expose this as the prefers-reduced-motion setting. Respect it: show the still image and do not start the video.

So plan three tiers. Desktop visitors get the loop. Phones, Low Power Mode and reduced-motion visitors get the image. Everyone gets a page that makes sense without the video.

Keeping the page fast: poster, preload and the LCP check

Google's web.dev defines Largest Contentful Paint (LCP) as when the biggest visible item on the page finishes loading. Its guide says a good LCP is 2.5 seconds or less and a poor one is over 4.0 seconds, measured at the 75th percentile of visits. For a video element, web.dev says the poster image load time or the time the first video frame is shown, whichever is earlier, counts as the LCP candidate.

This has a clear practical meaning: your poster is the real LCP element. A video can look smooth once it plays and still ruin your score because the poster is huge, wrongly shaped or loads late. So:

• Make the poster a properly compressed WebP or JPEG, with the same aspect ratio as the video and its width and height written in the markup.
• Test speed with the poster, not the motion.
• For a video below the first screen, set preload="none" so it does not download early. MDN notes the default, metadata, can still fetch a small part of the file.

Bandwidth is a second cost. A made-up example: 5,000 visits a month times a 3 MB video is about 15 GB of transfer for that one file. Check your hosting plan's limits.

Pause control and accessibility

The Web Content Accessibility Guidelines (WCAG) 2.2 have a rule, success criterion 2.2.2, that applies here. In plain words: moving content that starts automatically, lasts more than 5 seconds, and sits beside other content needs a way for the visitor to pause, stop or hide it. A hero loop behind your headline is exactly that case.

• Add a visible button with a clear label, such as "Pause background video", reachable by keyboard.
• Mark the video as decorative (aria-hidden="true") so screen readers skip it, and keep the headline text readable without it.
• A very short loop might seem to sidestep the 5-second line, but a clip that repeats on its own is still moving content on the page, so I would not rely on that. Add the button.
• Keep enough contrast. WKU's standard says its hero videos are darkened by 35% by default, and brighter videos may need more; that is one institution's rule. Put text on a solid panel if you can, and check it on a phone.

This is information, not legal advice. Accessibility duties differ by country and by sector, so check the rules that apply to you.

Where AI generation helps and where real footage wins

Real footage wins when the clip shows who you are. A 3 to 6 second shot of your actual workshop, kitchen, storefront or truck builds more trust than a generated scene. The question to ask is the same as in the hero image guide: does it show anything real? If yes, film it. A phone on a tripod in good light is enough. If a generic mood is enough, such as soft light moving across a desk, a generated or stock loop can work.

Higgsfield hosts several AI video models and can turn text or a still image into a short clip. Facts to know, as of November 2026 and from Higgsfield's pages:

• Keep it short and small. Your file ends up at about 720p anyway, so paying for the highest resolution wastes credits. Generate a few seconds at the lowest resolution that looks right, then compress it. The pricing page listed roughly 7 credits for a 5 second Kling 3.0 clip at 720p and roughly 22 for Seedance 2.0, but prices change and some features show their cost only on the generate button, so look before you press.
• Animate your own hero still. If you already made a good hero image, an image-to-video model can add slow movement to it, and the still becomes your poster. That keeps the look consistent.
• Free accounts add a watermark to every generation, according to Higgsfield's help center, so use a paid plan for anything that goes on a client or business site, and note that Higgsfield's own pages disagree on whether free outputs may be used commercially (the plan table says not included, the help center says not restricted), so paid is the safe choice for business use.
• Loops do not come for free. A generated clip rarely ends where it starts. Trim and cross-fade in your editor.
• Expect retries. Measure cost per approved clip. See spending credits wisely and the pricing guide.

The prompt style that works best for a background is calm and specific. A copy-ready starting prompt, made up for a bakery, to adapt: "Slow, steady shot of a baker's hands dusting flour over dough on a wooden table, warm morning light, shallow depth of field, no text, no faces, very little camera movement, 5 seconds." For prompt tips, see Higgsfield prompts and templates.

A before and after speed test with pass and fail

Do not guess. Measure the real page, not a demo.

1. Run a mobile speed test on the page before the video. Free options include Google PageSpeed Insights and the Lighthouse tool inside Chrome. Write down LCP and total page weight.
2. Add the video using the pattern above.
3. Run the same test again, on the same page, at about the same time of day. Run it three times and compare the middle result, because single runs vary.
4. Test by hand on a real iPhone, a real Android phone, with Low Power Mode on, and with the reduced-motion setting on.

These pass and fail lines are illustrative thresholds based on web.dev's "good" LCP line, so set your own:

• Pass: mobile LCP stays at 2.5 seconds or less, page weight rises by no more than your budget, the image shows when the video is blocked, the pause button works from the keyboard, and the headline is readable.
• Fail: mobile LCP goes over 2.5 seconds because of the change, the poster is blurry or the wrong shape, a blocked video leaves a black box, or there is no way to pause.

On search rankings: I found only second-hand reports about whether background videos help or hurt, so I do not claim either. Slow loading hurts visitors, and speed is something you can measure.

Alternatives: still image, short loop, CSS motion

• A good still image. Often the right answer. It is the cheapest in bytes, works everywhere and needs no pause button. Read website hero image: stock, photographer or AI for crops, file size and alt text.
• CSS motion on a still. A slow zoom or pan on the image using the browser's own animation. It costs almost nothing and respects reduced motion if you add that rule.
• Your website builder's own background video block. Wix, Squarespace and Webflow each offer a background video option. Website builders may handle some of the encoding for you, but check each builder's help page for limits and for whether a pause control is included.

An on-page video that visitors choose to play is a different job from a background loop. For that, see about-us and how-it-works videos for a service business. If you build sites for clients, see how to add an AI video service to a web design agency.

Who should skip a hero video

• Your site is slow on a phone today. Fix the images and hosting first.
• Most visitors arrive on phones, so the poster does the work and the video gains little.
• You have no footage of anything real and would rely on a generic scene.
• Nobody can test on real devices or run a speed check after the change.

How I'd approach this

I would design the poster image first, make sure it loads fast, and pass the speed test with it alone. Then I would film or generate a 5 to 8 second calm loop, remove the audio, compress it under a size I set in advance, and add it for wide screens only, with a pause button. I would test on a real iPhone, including Low Power Mode, and run a before and after speed check. If the numbers fail, the image stays and the video goes. If you want the hero section, the speed test and the video pipeline set up so your team can swap clips without breaking the page, Blur Studio builds that: see how I work with small businesses.