Landing Page Video: What to Show Above the Fold
A good landing page video for a SaaS shows your product doing the one thing the headline promises, in 5 to 10 steps, with captions that make sense with the sound off. Keep it real UI, not an animated explainer; keep it short enough to loop; and put it right under or beside the headline, where the claim needs proof. The hard part is not the first cut but keeping it true: every UI change makes a homepage video quietly wrong. Klevo solves that part by recording the flow from a saved script, so the update is a re-render instead of a reshoot.
Why does a homepage video matter so much?
The headline makes a claim. The video is the first proof. A visitor who reads “Send your first invoice in two minutes” and then sees the invoice go out in the clip next to it does not need to trust you; they just watched it.
The cost of a weak one is easy to miss. A stock animation or a slow, narrated tour gets skipped, and the visitor leaves with only your sentence. A clip that shows an old UI is worse: the first thing a new user sees after signing up does not match the page that sold them.
What should a landing page video show?
- The headline’s promise, done once. If the headline is about reports, the clip ends on a report.
- Real screens. Your actual app with clean demo data, not a mockup.
- One flow. Not a feature tour. 5 to 10 steps is a good range; how long should a demo video be explains why steps beat seconds.
- Captions that work muted. Plenty of visitors never turn the sound on. One short caption per step, saying why the step matters (captions that explain a demo).
- Zoom on what matters. The click that creates the value deserves a zoom; the rest can stay wide.
- A clean start and end. No cookie banner, no welcome tour, no loading spinner.
Which format and frame fit a landing page?
| Spot on the page | Format | Frame | Notes |
|---|---|---|---|
| Hero, desktop layout | 16:9 | Browser | The default; matches most hero columns |
| Hero, mobile visitors | 9:16 or 4:5 | Phone | A second render of the same script |
| Feature section | 16:9 or 1:1 | Browser or no frame | One clip per feature, 3 to 6 steps |
| Pricing or signup page | 1:1 | Browser | The shortest flow: sign up and first win |
All of these can come from one recording. Demo video formats and device frames by channel covers the other channels.
How do you make the video with Klevo?
- Connect Klevo to Claude, ChatGPT, Cursor or Claude Code (setup guide).
- Describe the headline flow: “On https://staging.myapp.com, create an invoice for Acme, add two lines and send it. 16:9, browser frame, zoom on Send.”
- The AI drives the browser. It clears cookie banners and tours before the recording starts, takes one step at a time and retries anything that misses.
- Klevo renders the MP4 with a smooth cursor, the zooms, your captions and intro and outro cards (Pro can hide them, which suits a looping hero).
- Ask for the other formats. “Render it 9:16 on a phone frame” gives you the mobile hero from the same steps.
Need the visitor to see your brand? On Pro you set the font, the background and the brand color.
How do you keep it current?
When you ship a UI change, ask for the same video again. The script is saved, so the AI does not have to explore your app a second time. If a step no longer works because a button moved, the render fails on that step with a screenshot, which is also a quick check that your main flow still works (a failed demo step is a bug report). More on the routine: keep demo videos current after every release.
What does it cost?
| Plan | Price | What you get |
|---|---|---|
| Free | $0 | 3 videos a month, 720p, up to 20 steps, small watermark, 10 voice credits to start |
| Pro | $19 a month or $149 a year | 1080p without the watermark, device frames, any Google Font, your brand, hide intro or outro, up to 120 steps |
| Ultra | $49 a month or $399 a year | Everything in Pro, up to 240 steps, more voice credits |
For a homepage you will want Pro: no watermark and 1080p. Your first Pro or Ultra subscription is free for 14 days, then $19 or $49 a month; cancel before the trial ends and you pay nothing. See the pricing section.
What is the next step?
Read your headline, then write the 5 to 10 steps that prove it. Create a free account, paste those steps into the AI you use with Klevo connected, and put the MP4 next to the headline. For more launch placements, see product launch video.
FAQ
Should a landing page video autoplay?
Browsers generally only autoplay video when it is muted, so a hero clip usually plays muted and loops. That is why the captions matter: they carry the story without sound.
Can I add a voice-over for a longer homepage video?
Yes. AI narration reads the captions and spends voice credits. For a muted hero loop, leave it off.
Do I need a separate video for mobile visitors?
Not a new recording. Render the same script in 9:16 or 4:5 with a phone frame.