How long should a landing page hero video be?

A 15–25 second loop works well. Put a longer narrated demo behind a play button.

Should a hero video have sound?

No. Browsers generally block autoplay with sound, so design the loop to work silently with short on-screen text.

What aspect ratio is best for a hero video?

16:9 for desktop layouts; a 4:5 or 1:1 version often suits mobile. Spotlight exports all of these.

Will a hero video slow down my page?

It can if the file is large. Compress the MP4 for the web, keep it short, and use a poster image.

Can I make the hero loop and full demo from one project?

Yes. Make the narrated demo, then a shorter silent cut, and export both from Spotlight.

Use case

How to Make a Landing Page Hero Video

A landing page hero video sits next to your headline and shows the product working before anyone scrolls. It needs to be short, silent-friendly and light enough not to slow the page down.

Updated 19 October 2026

Quick answerA landing page hero video is usually a 15–25 second, muted, looping clip that shows your product’s core flow next to the headline. Use 16:9 (or 4:5 on mobile), on-screen text instead of narration, tight zooms on the UI, and a compressed MP4. Offer a longer narrated demo behind a play button for visitors who want more.

Why most hero sections undersell the product

The hero is the most valuable space on your website, and most SaaS homepages fill it with a static screenshot or an abstract illustration. Visitors read the headline, can’t picture the product, and either scroll in search of proof or leave.

Some teams try a hero video, but use their full launch film: two minutes, narrated, autoplaying muted, so the narration is lost and the product doesn’t appear until 20 seconds in. Others drop in a raw screen recording that’s too small to read at hero size.

What a great hero video looks like

Length: 15–25 seconds, looping. Visitors should get the point within one loop.
Silent by design. Browsers generally only autoplay video when it’s muted, so the hero loop shouldn’t rely on narration. Use short on-screen text.
Product in the first second. No logo intro — the headline already names you.
Tight framing. At hero size, a full desktop screenshot is unreadable. Zoom to the area where the action happens.
Matches the headline. If the headline says “Ship release notes in minutes”, the loop shows release notes being made in minutes.
Light file. Compress the MP4 for the web and provide a poster image so the page doesn’t feel slow.
A longer option. Put your full narrated SaaS launch video behind a “Watch the demo” button.
Mobile variant. A 4:5 or 1:1 version often fits mobile layouts better than 16:9.

Scene-by-scene recipe (20-second loop)

Input (0–5s) — UI demo. A cursor types a prompt, uploads a file or clicks the main button.
Process (5–10s) — walkthrough. The product doing its job, with a zoom to the key area.
Result (10–15s) — screenshot with highlight. The output, ringed or spotlighted.
Second angle (15–20s) — device mockup or screenshot. Another view of the result — the mobile view, the share link — that leads naturally back to the start of the loop.

Leave the end card off the hero loop; your page’s CTA button does that job. Start from the AI tool template or B2B SaaS template and shorten it.

How to make it in Spotlight

Paste the landing page URL. Spotlight’s website to video step reads your headline and copy so the story matches the page, and the Brand style picks up your colours and fonts.
Upload a recording of the core flow.
Choose 16:9, about 20 seconds, and the Clean or Brand style so it sits quietly beside your headline.
Generate the first cut, then instruct: “no voiceover, no end card, product on screen from the first frame”.
Use short text overlays instead of narration, and turn off music for the silent loop.
Export 1080p MP4 in 16:9 and 4:5, then compress for the web with your usual tooling.

Make the longer narrated version from the same project with AI voiceover. Because only changed scenes re-render, both exports are quick. See pricing.

Placement, performance and accessibility

How the video sits on the page matters as much as what’s in it:

Place it beside or directly under the headline, so the claim and the proof are seen together.
Use a poster image — ideally a frame from the video showing the product — so something meaningful appears before the video loads.
Set it to autoplay muted, loop and play inline on mobile, so it doesn’t jump to full screen.
Respect reduced-motion preferences. For visitors whose system asks for less motion, show the poster image instead of autoplaying, and give everyone a visible pause control.
Lazy-load the full demo. Only load the longer narrated video when someone presses play.
Test on a real phone on a mobile connection, not just a fast office network.

Then measure what matters for your site — sign-ups or demo requests from the page — rather than assuming the video helped. If you test variants, change one thing at a time: the loop, the headline or the CTA.

Mistakes to avoid

Relying on sound in an autoplaying hero.
A long intro before the product appears.
Heavy, uncompressed files that slow the page.
A jarring loop. Make the last scene flow back into the first.
Mismatch with the headline. The loop should prove the headline’s promise.

Scene-by-scene plan

16:9 · about 20s · Clean style

UI demo — “Paste your notes”
Input: cursor types or uploads; product on screen from frame one.
Walkthrough — “Watch it draft”
Process, zoomed to the key area.
Screenshot — “Release notes, ready to ship”
Result with a ring highlight.
Device mockup — “Share anywhere”
Second angle that loops back to the start. No end card.

Make this video free