The Video at the Top of Your Homepage Is Decided in the First Second, Not by Its Length

We are often asked whether a homepage should open with video. What decides the outcome, though, is not whether one is there. It is what is on screen during the first second after the page opens.

And when a video fails to earn its place, the footage is rarely the reason. It did not play, it made the visitor wait, or it was cropped away on a phone. Almost every case comes down to those three.

What sits in the first second

A video does not necessarily begin the moment the page opens. There are the few hundred milliseconds before it loads, the settings on the device, the state of the connection. During that time what fills the screen is not the video but a still image.

So the first frame a visitor sees is not the first frame of the film. It is the image placed in front of it. Leave that empty and the page opens on a black band, and only then begins. This is the shape in which adding a video makes the impression worse.

Use the same picture as the film's own first frame. When they match, the handover is invisible. When they differ, the screen changes twice within one second, and that alone reads as restlessness.

What does not land in one second will not land in fifteen. Before adding length, check that the still frame stands on its own.

The size of a top video is set by weight, not by seconds

Questions about size usually begin with how many seconds it should run. What to settle first is the dimension and the weight.

The dimension follows from how much of the screen the video occupies. A full-screen background is served by 1920 on the long edge. A band across the top needs 1280. The most common mistake is to receive 4K from the edit and place it as delivered. Resolution beyond the size at which it is displayed is invisible on screen and adds nothing but waiting.

As a background, ten to fifteen seconds is enough. No one watches longer than that in a single pass. A short loop, joined cleanly, buys better quality at the same file size.

Strip the audio track. A homepage video is almost never heard, yet the audio still costs weight.

Does a video at the top make the page slow?

The short answer: what decides this is not the file size. It is whether loading the video delays the first thing drawn on screen.

With the same file, a page that shows the still first and loads the film behind it feels almost unchanged. A page that draws nothing until the film arrives feels heavy at a few megabytes.

So the number worth measuring is not megabytes. It is the time from opening the page to the first image appearing. Cut file size without looking at that and you will have lowered the quality while changing nothing a visitor can feel.

Trim in this order: dimension, length, audio, and quality last. Starting with quality costs the most in appearance and returns the least.

On a phone, half of a wide video is not there

Top videos are made in landscape, on a desktop. Most of them are watched in portrait, on a phone.

Fitted to portrait, the left and right of a landscape frame are cut away. Assume only a narrow central band survives. If the subject is not inside it, nothing was shown to the visitor on a phone.

So allow for it in the edit: leave margin on both sides that may be lost. Keep the subject centred and carry no information at the edges. If there is type, keep it well inside that band.

Where the budget allows, export a separate vertical cut. Rebuilding portrait from the same footage costs far less than shooting again.

Some devices will never autoplay

This part is measured, not assumed. Safari will not autoplay a muted video while the device is in Low Power Mode. That is controlled by the device and cannot be overridden from the page. The same page plays in Chrome, which is why one person sees motion and another sees a frozen frame. Low Data Mode on iPhone does the same thing.

Meet every technical condition for autoplay and those two settings still win. A share of your visitors will always see a still.

So design from the other end. Does it hold when nothing plays? If the frozen frame works as a photograph, the page does not lose. The motion becomes a gift added to a screen that already stands.

Then make certain a single tap starts it. One trap here: Safari does not count scrolling as the gesture that permits playback. A fix built on scroll has not been fixed at all.

Opened from social, the scrolling snags

Scrolling stutters, but only when the page is opened from a link inside Instagram or LINE. In Safari it is smooth. This too gets blamed on the video, and the cause lies elsewhere.

A browser inside an app restores its own toolbar as you scroll up, and while it does, the height the page measures itself against changes on every frame. Any band sized to the height of the screen is recalculated each time. The video is not heavy; the frame it was placed in is built on a moving measure.

The fix is to measure that height once on load, hold it, and measure again only when the device is rotated. Nothing moves by a single pixel.

We missed this six times first, editing CSS on a hunch. It was settled in one pass only after building test pages with one element removed at a time and viewing them on the actual devices. That it looked smooth on your own phone is not a check.

Build it so it can be replaced in a year

A top video always dates. The season turns, people change, products change. The expensive outcome is wanting to swap one part six months later and finding that the only way is to make the whole thing again.

So write down four things at the start. The long edge. The length. The width of the central band that carries the subject. How the still frame is made. With those four on paper, the next film fits the same frame no matter who makes it.

Without them, what you have is a single film and nothing more. However well it was shot, it expires within a year. When we take on a brand film, these four are what we settle first; the pictures come after.

Not whether to use video, but what you refuse to show

A video belongs at the top of a homepage to reduce, not to add. If it can carry one thing in one second, nothing is stronger. The moment it tries to carry three, it is only a heavy page.

What is shown in the first second, and what is kept out of it. Once that is settled, ten seconds is enough.

Decide, then place it. That is the whole order.