Compress Video for Website Background (Under 5 MB Autoplay)

Getting the tool ready...0%

Compressing for Website Background in detail

Most CMS platforms, WordPress themes, and page builders put the comfortable range at 8 to 15 MB, and under 5 MB for anything that autoplays above the fold. Those numbers come from what a visitor on a phone connection will wait for, not from any codec limit. You get there without HandBrake: the target buttons match the placements, the audio track goes, and the index moves to the front of the file so playback starts while the rest is still downloading.

Dropping audio is the easy win nobody takes. Browsers only autoplay video when it is muted, so the audio track in a background loop is dead weight. At the usual 128 kbps that is close to half a megabyte for every 30 seconds, which is around a tenth of a 5 MB budget handed straight back to the picture. The encoder then works out a video bitrate from your target size and the clip length, caps the output at 1080p, and encodes once, so the file lands close to the number you typed. A 20 second loop at 5 MB can stay at 1080p and look clean. A 60 second loop at the same size will look soft, so trim it or go to 10 MB.

The output has its index at the front of the file, which is what lets a browser start playback while the rest is still arriving. Without it the visitor stares at a blank hero until the whole file has downloaded. Once you have the MP4, grab a poster frame from the same clip so slow connections show a still instead of an empty box, and put autoplay, muted, loop, and playsinline on the video tag. The snippet under the output panel is ready to paste. Your source file never leaves this tab, so unreleased product footage and client b-roll stay on your machine.

Background video targets by placement

Setting	Value	Notes
Autoplay hero above the fold	Under 5 MB	Must be moving within a second or two of the page opening.
Section background loop	8 to 15 MB	The range most CMS and theme docs quote for self-hosted background video.
Clip length	10 to 30 seconds	Short loops hide the seam better. Trim first, then compress.
Resolution	1080p max	Kept at source up to 1080p. Resize to 720p when a long loop must fit 5 MB.
Audio	Removed	Autoplay only works muted, so the track is wasted bytes.
Container	MP4, H.264, faststart	Plays in every browser, including Safari on iPhone.
Video tag attributes	autoplay muted loop playsinline	playsinline stops iPhones from opening the full screen player.

When to use this preset

Hero section loops

A 15 second drone or product shot behind the headline. Target 5 MB so it is moving before the visitor reads the first line.

Restaurant and venue ambience

Slow pans of the dining room or a bar pour behind the menu link. 10 MB keeps the grain and warmth at 1080p.

Product demos on landing pages

A silent 20 second screen capture of the app looping under the call to action. The audio was never going to play, so drop it.

Agency and portfolio showreels

Cut the showreel to its best 30 seconds and target 15 MB for a section background. Link the full version below it.

Real estate and hotel walkthroughs

Glide through the lobby or the view from the balcony. Keep it at 1080p and 10 MB so the finish of the room still reads.

Client CMS handover

Give a client two buttons instead of a HandBrake tutorial. They drop the clip, download the MP4, and upload it to their site.

Frequently asked questions

What size should a background video be for a website?

Aim for under 5 MB if it autoplays above the fold and 8 to 15 MB for a background loop further down the page. Those are the ranges most CMS vendors, theme authors, and page builders quote, and they line up with what a visitor on a mobile connection will tolerate. Anything above 20 MB is better served as a YouTube or Vimeo embed.

Should I remove the audio from a background video?

Yes. Chrome, Safari, and Firefox all block autoplay unless the video is muted, so the audio track in a background loop can never play. Removing it saves roughly half a megabyte per 30 seconds at 128 kbps and gives those bytes back to the picture. This preset removes it by default. Untick the box if the clip will have a play button and sound.

Why does my background video take so long to start?

Two usual causes. The file is too large for the connection, or the MP4 index sits at the end of the file so the browser has to download everything before it can show a frame. This tool writes the index at the front, which is what the faststart flag does in FFmpeg and the Web Optimized box does in HandBrake. If the file is already under 10 MB and still slow, check that your host serves it with range request support and not through a redirect.

What is the best format for a website background video?

MP4 with H.264 video is the one format every browser plays, including Safari on iPhone. WebM with VP9 is smaller at the same quality, but Safari support arrived late and is still patchy on older iOS, so if you ship one file, ship the MP4. You can add a WebM source above it later for browsers that support it.

Why will my background video not autoplay on iPhone?

Safari on iOS needs three attributes on the video tag: autoplay, muted, and playsinline. Without playsinline the phone opens the clip in its full screen player instead of behind your content. Without muted it will not start at all. Low Power Mode also pauses autoplay, so always set a poster image as the fallback.

What resolution should a website background video be?

1080p is the sensible ceiling. Most background videos sit behind text and a dark overlay, so the extra detail of 4K is invisible and the file is four times larger. This preset keeps your source resolution up to 1080p. If a long loop has to fit under 5 MB, resize to 720p first so the encoder can spend its bitrate on motion instead of pixels.

Can I use this instead of HandBrake?

For a website background, yes. The HandBrake advice most docs give, the Fast 1080p30 preset, keeps the audio track and gives you no control over the final file size. This preset drops the audio, lets you type the size you need, and runs in your browser with nothing to install. For batch converting a whole folder, HandBrake is still the better tool.

Compress Video for Website Background