Background videos can make a website feel premium, modern and engaging — but only when they’re produced specifically for the job. A normal promotional video dropped into a website header is usually too busy, too heavy and poorly framed for mobile.
Here’s how we produce background header videos that look great across desktop and mobile without distracting from the website itself.
A website header video has a very different job to a social media reel, corporate video or advertisement.
People aren’t visiting your website specifically to watch it.
The video sits behind the website content. Its job is to create movement, atmosphere and visual interest while allowing the headline, message and call-to-action to remain the focus.
That means the best website background videos are usually shorter, slower and simpler than traditional video content.
One of the biggest mistakes when filming a website header is composing everything for a widescreen desktop monitor.
A 16:9 video might look perfect on a laptop, but when that same footage appears on a portrait phone screen, much of the left and right sides can disappear.
When filming, we recommend keeping the important subject within approximately the centre 40–50% of the frame.
Faces, products and important activity should stay close to the centre.
It’s also worth shooting slightly wider than you think you need. That gives the editor more room to create separate desktop and mobile versions later.
Ideally, produce two versions:
Desktop
1920 × 1080
Mobile
1080 × 1350 or 1080 × 1920
A dedicated mobile edit will almost always look better than forcing one widescreen video to work everywhere.
A background header isn’t the place for a 60-second corporate film.
Aim for around 6–12 seconds, with 8–10 seconds being a good starting point for most websites.
More importantly, the beginning and end should work together so the video can loop naturally.
The visitor shouldn’t suddenly notice the video restarting every few seconds.
Subtle movement generally works better than action.
Think:
Avoid rapid cuts, whip pans, flashing lights and aggressive transitions.
If visitors start watching the background video instead of reading the website, the video is probably doing too much.
Before filming, consider where the website’s headline and buttons are likely to sit.
Avoid filling every part of the frame with detail.
A strong header video often has intentional negative space where text can comfortably sit.
For example, if the website headline will appear on the left, the main subject may be positioned slightly right of centre while still remaining safe for mobile cropping.
This should be considered during production — not discovered after the footage has already been filmed.
A website background video usually shouldn’t be graded as brightly or aggressively as a standalone promotional video.
We often favour a slightly darker, softer colour grade.
This helps white website headings remain readable without requiring an extremely heavy black overlay later.
The goal isn’t to make the footage dull. It should still look cinematic and premium, but highlights, saturation and contrast should be controlled.
Think:
Cinematic, not crunchy.
Keep skin tones natural. Protect highlight detail. Avoid crushed shadows, excessive sharpening and overly saturated colours.
Bright windows, white skies and strong highlights can become distracting once text is placed over footage.
Likewise, extremely dark areas can lose all detail after the website applies additional tinting.
Aim for balanced exposure with enough information remaining in both highlights and shadows.
This gives the designer more flexibility later.
For most website header videos, our production starting point is:
There is nothing wrong with filming the source footage in 4K. In fact, the extra resolution gives the editor additional freedom to crop and reframe.
The final web version, however, will generally be exported much smaller.
Background header videos should be produced with the expectation that they will play silently.
Any production audio can normally be removed from the final export altogether.
This also changes the way the video should tell its story.
It needs to work visually without relying on dialogue, sound effects or music.
A few things tend to make poor website background footage:
The easiest way to think about it is:
A website header video should feel like a moving background, not a video someone has stopped to watch.
The best results normally combine subtle motion, clean composition, soft colour grading, controlled exposure and mobile-safe framing.
And most importantly, plan the mobile crop before the camera starts recording rather than trying to fix it afterwards.
At Evosion, we combine website design, photography, videography and digital marketing, which means the footage can be planned around how it will actually be used rather than produced in isolation.
If you’re planning a new website or refreshing an existing one, we can help develop the visual direction, capture the footage and make sure it works across desktop and mobile.
