What is a hero video? The website loop and the brand film

A hero video is the short, usually silent, looping clip at the top of a web page. In campaign planning, the hero video is the flagship film instead.

4 min readSume
All posts

A hero video is a short video that fills the hero section, the large area at the top of a web page, in place of a still banner image. It usually plays on a loop, without sound, behind a headline. In marketing plans, “hero video” also names a campaign's flagship film, the main piece that shorter cuts are made from.

Both meanings are defined below in plain terms. How to make one with AI uses Sume's Video generation and Format catalog docs, read on 2026-09-28.

What is a hero video on a website?

It is the moving version of a hero image. The page's first screen shows a clip that starts by itself, repeats, and stays silent, with text and a button layered on top. Visitors see it before they scroll, so the clip sets the page's look rather than telling a story.

On a store, a hero video can be a single product shot: the product turning slowly, a pour, a fabric moving in wind. Placement is done in the site builder; for a Shopify home page, see Shopify video banner.

What is a hero video in marketing?

In campaign planning, the hero video is the flagship film: the main, most produced piece of a launch. Cut-downs for ads and social posts are edited from it or shot alongside it. This sense has nothing to do with page layout. A website hero loop can be trimmed from the campaign's hero film, which is one reason the two meanings get mixed up.

What does a website hero video need?

These follow from how the section plays the clip:

  • A loop point you can't see, because the clip repeats. Start and end on the same frame.
  • No reliance on sound, because the clip plays muted behind text.
  • Calm space where the headline sits, so the words stay readable over moving footage.
  • A shape that matches the section: wide on desktop layouts, with a vertical version if the site swaps clips on phones.
  • Loading that fits its place on the page. Shopify's video_tag reference, for example, says you shouldn't lazy-load videos above the fold.

How do I make a hero video with AI?

Start from a packshot or a brand still and animate it. On Sume's POST /v1/videos, a frame_images entry with frame_type first_frame makes the clip image-to-video from your still; add the same still as last_frame to end where it began, on a model whose supported_frame_images lists both. Seamless loop AI video walks through the full request.

For the flagship-film sense, the catalog Format sume-product-commercial describes itself as a “premium product commercial with a controlled hero composition” and names “ecommerce hero videos” among its uses; AI product commercial video API shows how to call it.

Request fields for a hero loop, from Video generation, read 2026-09-28.
FieldSet it toWhy
frame_imagesYour still as first_frame and last_frameStarts and ends on the same frame
aspect_ratio16:9 for a wide section, 9:16 for phonesEach model lists its own ratios
generate_audiofalseThe section plays it muted
durationA few secondsMost catalog models top out at 15
resolutionA value the model listsSent explicitly, not left to a default

What can't an AI hero video do?

A generated clip pins only its ends: the motion in between is generated, so check the loop on repeat before you publish. It won't hold your headline, which belongs in the page's HTML over the video. And it isn't a 3D model you can re-render from new angles; each change is a new generation.

Sources

Related posts

More in Use cases

All Use cases posts

Written by Sume