Video for landing page: what loads first

A video file is heavy, so a page that starts with one often shows an empty box with a spinner while the file downloads. The headline may appear first, or it may wait behind the same request. Phone browsers usually start a video by itself only when it is muted, so a video that expects to play may sit still with a play icon in the middle. A visitor on a slow connection can see a blank area above the button, and may leave before it fills.

• A poster image: does a still frame show before the file starts loading?
• The offer and the button: visible above the video on a phone held upright
• Autoplay: does the video start by itself on a phone, or wait for a tap?
• Player overlays: does an embedded player show a title bar or a link to its host?
• The end screen: does the video finish by sending the visitor to other videos?

A poster is the still frame a video shows before it plays. It is the only part of the video a visitor has seen when they decide whether to press play, so it is the part that has to carry the point. Pick a frame that shows the product in use or the result it gives, not a logo on a colored background. Set the poster in the page so it draws with the first screen, and check that it is the image the visitor sees when the file has not started. A blank frame or a dark rectangle reads as a page that failed to load, even when the file works.

Autoplay often works on a laptop and fails on a phone, because the phone holds back sound until the visitor has touched the page. A video set to play with sound may not start at all, and the visitor is left with a still frame and a play icon they have to find. Set the video to start muted if you want it to move on its own, and keep the play control large enough to hit with a thumb. Then test it on a phone with autoplay on, and again with the file still loading, to see what the visitor is actually left looking at.

A visitor who never presses play still needs the point of the video, so put one plain sentence beside the player that says what the product does in its first minute. Keep it short enough to read above the fold on a phone, and write it as the first thing the video shows, not as a slogan. Search engines and screen readers read that sentence too, and a visitor on a slow connection reads it while the file is still loading. The screenshot in the report shows what sat beside the player at the step where the visitor stopped.

Videos get re-edited: a new intro, a longer cut for a campaign, captions added, a different file for each screen size. Each new version can change how long the page takes to show the offer, and the button can slide under the video again. After each new file, load the page on a phone and check the offer and the button before the file finishes. The check should run before each new paid campaign.