Blog / Guide
Hero video for a company website: how to film it without slowing the site down
How to plan a hero video for a company website: length, file size, format, silent loop and mobile version. A guide from a Madrid filmmaker.
A hero video for a company website runs 8 to 15 seconds, loops without sound and is exported under 4 MB so it does not slow the page. I film it knowing the website text will sit on top, with slow, clean shots.
It is the first contact a visitor has with the brand. If the video is heavy or generic, it does more harm than good. If it shows the company's real work and loads fast, the site makes sense in three seconds.
What is a hero video and what is it for?
It is the video that fills the top of the home page, behind the headline and the main button. It is not a corporate video to watch with sound: it is moving imagery that gives context. A factory floor at work, a team in a meeting, a product in use.
It does not replace the full corporate video. It complements it. The hero sets the mood on the front page and, if the visitor wants to know more, a button leads to the long video or the services page.
How to film a hero video well
Slow shots with room for text
I shoot with smooth movement: a slider, a gimbal or a static camera with some life inside the frame. I leave a third of the frame empty or out of focus, which is where the headline will go. Fast cuts and shots with lots of detail compete with the text and tire the eye.
Length and a loop without a jump
Ten seconds is usually enough. What matters is that the end connects to the start without the cut showing. I solve it in the edit with a short dissolve or a shot that ends on a movement similar to the opening. A loop that jumps gets annoying after the second round.
No sound, no subtitles unless someone speaks
Browsers only autoplay a video if it is muted, so the hero carries no audio. If I film someone speaking, I do not count on it being heard: I use it as imagery and the message goes in the website text.
File size and format to keep the site fast
I export at 1920 × 1080 at most, at 24 or 25 frames per second, in H.264 (MP4) and, if the developer asks, also WebM. The target is 2 to 4 MB. To get there I lower the bitrate, remove the audio and trim the length before I reduce quality.
I also deliver a still image (poster) of the first frame. It loads instantly while the video arrives and is what shows if the browser does not play the loop. On mobile I usually deliver a lighter version, sometimes vertical, or just the still image to save data.
Common mistakes in a hero video
- Uploading a 30 or 40 MB uncompressed file and leaving the front page loading for several seconds.
- Using generic stock footage instead of the real company.
- Using a video with so much movement that the headline is hard to read.
- Forgetting the still image and leaving the header black while it loads.
- Leaving the audio on, so the browser does not autoplay it.
- Not testing on mobile with a normal connection, rather than office wifi.
Frequently asked questions
How long should a website hero video be?
Between 8 and 15 seconds, looping. Longer adds weight without adding value, because visitors do not watch it all. What matters is that the loop is not noticeable.
How big should the file be so it does not slow the site?
Between 2 and 4 MB for desktop. On mobile a lighter version or a still image is better. A hero video over 10 MB is usually noticeable in load speed.
Can a hero video have sound?
Not if you want it to start on its own. Browsers block autoplay with audio. The hero is muted and, if there is a spoken message, it goes in a separate video with a play button.
Can footage from another shoot be reused?
Yes, as long as the shots are clean and you hold the rights. I often use a corporate shoot to get the hero shots, so no separate day is needed.
If your company needs a hero video for its website, write to me from /contacto with the page address and the kind of shots you have in mind. I will reply with a shooting plan and an itemised quote. The corporate video services are on /servicios.