A hero video on your website: when it helps, and when it wrecks the page

A hero is the most expensive space on your website: the first thing that renders, the part every visitor sees. Putting a video above the fold is a decision about weight, sound and attention, not a decoration.

The short version: a film earns the hero when it shows something that cannot be stated, not when it is there because a moving rectangle looks confident.

Nine's free page reads your website and plays Nine's own films in your colours, with no account and no card. Try it on your own address before you decide whether your hero wants a film at all.

What a hero film can do that a headline cannot

A headline states a conclusion. A film shows the sequence that makes the conclusion reasonable, which matters most when what you sell is a process, a comparison, a change over time, or a scale that is hard to believe in a sentence.

A hero usually carries three claims. What it is: a headline does that well. How it works: a headline can only assert it, while a film shows the order. Why it is different: that is a comparison, and a comparison is clearer in motion.

The test is blunt. Watched with the sound off and the headline taken away, would somebody still understand what you do? If not, it belongs lower down, where the visitor has already agreed to give you thirty seconds.

Why autoplay with sound is the wrong default

Sound is the part of a hero that people do not forgive. Most browsers refuse to start a film with sound until the visitor has interacted with the page, and where it does start, it talks over whatever they had on.

A film that talks at somebody in a meeting or on a call is a film they close, and the cost is not the thirty seconds. It is the page they leave.

What to do instead:

• Start muted and looped, with the words on screen. This is the version that can be relied on to play, and it works for the visitor who never turns the sound on.
• Put sound behind one visible control. Hover controls do not exist on a phone, and an icon in a corner is not a control.
• Pause the film when it leaves the screen. A hero that keeps playing while somebody reads below it is a bug with a soundtrack.
• Give a pause that holds its place. One that restarts the film is a trap.

If the film only works with sound, it is not a hero film. Put the poster in the hero and let the film live where somebody chose to watch it.

Page weight, and why one self-contained file matters

The arithmetic is easy on your own page. A six megabyte film is forty eight megabits, which is forty eight seconds on a one megabit connection and closer to ten on a five megabit one. Your headline is in the markup and renders at once, while a poster of about 150 kilobytes arrives far sooner.

So the order is fixed: type first, poster second, film third. A video for a landing page has the same arithmetic and a little more patience to spend.

A plain file earns its place here. The film Nine hands you is an ordinary video file with the words drawn into the picture, so nothing else has to be fetched for the type to look right, which in a hero means one request rather than a film plus a font file plus a script. A film from your own website explains how Nine reads your look.

Two smaller decisions belong with it: serve the poster as an image, hold the film back until somebody presses play, and size the file to the space it plays in.

The poster frame is most of your first impression

Many visitors will never see the film move. They scroll past before it starts, their connection makes them wait, or the film waits for a press. What they see is the poster frame.

Choose the poster as a still, not as whatever frame was on screen when the file was exported. Four checks:

• Does your name read at phone width? Type sized for a desktop hero is too small on a phone.
• Is anything important near the edge? A poster cropped tall loses the sides, usually where the type sits.
• Is it a frame from a fade? A half transparent frame as a poster looks like a mistake.
• Does the poster tell the truth? If the still promises something the film does not deliver, the film becomes the disappointment.

The poster and the first frame need not match, but they should not contradict each other. If the poster carries a sentence, keep it on screen when the film starts too, so the cut to motion does not erase it.

What changes on a phone

A phone hero is a tall screen with a thumb near the bottom, and a wide frame does not fit it. Cropped to fill, it loses its sides. Letterboxed, it leaves bands of colour above and below. Use the tall cut instead.

The rest is shorter than people expect:

• Keep the controls inside the screen. A play button under the browser bar cannot be pressed.
• Do not hide the page below the hero. A film that fills the screen leaves no evidence that anything else exists.
• Watch the taps. A film on top of a link swallows the tap, so keep one target per area.
• Smaller frame, smaller file. A phone shows the film at a fraction of desktop width, so a gentler version is enough and it costs less data.

Then test on your own phone, on the connection you really have, with the sound off. That is the version of your website most visitors will meet.

Captions, and the visitor who never turns the sound on

An autoplay video on a website is silent by definition, so the words have to be on the screen. Captions are part of the design, not a file added at the end.

Where there is narration, ask for the words as type on screen and as a caption track, and put a transcript on the page. A caption track can be switched on, searched and read aloud; type burned into the picture cannot.

Two more rules:

• Contrast changes as the film moves. Type that reads over a pale frame can vanish over a dark one, so hold the words on a steady area rather than the busiest part of the picture.
• Respect the setting that asks for less motion. Where a visitor has told their device not to animate things, show the poster instead of the film.

The words are drawn into the picture in your own typeface when its licence allows it, so on screen they are your type, not a lookalike. In a hero that matters most, because it is the first thing anyone sees.

Measuring whether it worked

Four things are worth measuring, and they are not equally useful. Plays are the least useful, because an autoplay video produces one without anybody deciding anything. Watch time, scroll depth and conversion tell you whether the hero earned its space.

Watch time is the one to read first. A thirty second film with a typical watch time of six seconds means the average visitor saw a fifth of it, so a claim at second twelve is one most visitors never reach.

Instrument it from the player, not the page: the start, the progress points you care about, the pauses and the end, each as one small signal sent while the tab is visible. A film in a background tab looks like attention it never had.

Scroll depth and conversion only mean something against a comparison. Measure the share who reach the bottom of the page for a week with the film in the hero, then a week with a still in its place. Decide the action first, whether that is a quote request, a signup or a download. If neither number moves, the film is decoration, and decoration above the fold is the most expensive kind.

One film, several shapes: the versioning problem

One film has to work in three places at once: the hero of your website, a social post, and a slide in a sales deck. Each crops differently, so a film made only for a wide frame loses its type in a tall crop. In Nine you reframe the finished film wide, tall or square in the chamber, so what changes is framing, not content. The shapes are explained in full.

The rule that keeps several shapes from becoming several films is that the words stay the same and only the frame changes. The moment the deck version needs a different sentence, you are making a second film. Keep one master, so a price or a name changes once.

An explainer video on a homepage is the longest version you will make, because the visitor chose the page and is standing still. A social post has to pay off before the thumb moves.

In Nine, a film of your own comes with a monthly plan, and a film Nine writes is judged before you see it against a bar of nine out of ten. The plans are on the pricing page:

• Film. Films of up to 30 seconds in your own look, for one person.
• Film + Transparent. Every film also as a transparent layer, for a team of up to three.
• Production and Studio. Longer films, graphics over your own talking-head video, extra languages, and more films a month.

How it works is on the front page, and transparent video covers the layer that sits over your own page.