How to make a landing page hero video that loads fast and explains your product

A good landing page hero video is a short, silent loop of your product doing its main job, usually 10 to 30 seconds, that autoplays muted, loads quickly and is readable without sound. Record the core workflow with zooms on the key clicks, add a clean background and frame, export a compressed MP4 (and optionally WebM) with no audio track, and embed it with a poster image so the page never shows a blank box. For a longer narrated demo, use click-to-play instead of autoplay.

Two kinds of landing page hero video

Before recording, decide which job the video does. They are produced differently.

Many sites use both: a silent loop in the hero and a "Watch the 2-minute demo" button that opens the full version. For producing the longer one, see how to make a product demo video.

What to show in the hero loop

The hero loop sits next to your headline, so it should prove the headline. If the headline says "Turn customer calls into tickets automatically", the loop shows a call transcript becoming a ticket. Keep it to one flow:

1. Start state (1 to 3 seconds): the input or the problem.
2. Action (5 to 20 seconds): two or three clicks, each zoomed so it reads at hero size.
3. Result (3 to 5 seconds): the output, held long enough to register.

Make the last frame flow back into the first so the loop does not jump. Ending on a clean state that resembles the start helps.

Recording the hero video

Hero videos are watched closely and repeatedly, so prepare well:

• Use perfect demo data. Realistic names and numbers, no lorem ipsum, no real customers.
• Record at a moderate window size, around 1280 to 1440 pixels wide. Text recorded at a huge resolution and then shrunk into a hero slot becomes unreadable.
• Move slowly and pause after each click. Speed can be added later; smoothness cannot.
• Do several takes and pick the cleanest.

Zooms matter even more than usual in a hero slot, which is often only half the page width on desktop and small on mobile. Click & Record logs every click while you record and turns each into a zoom afterwards, panning between nearby clicks rather than bouncing in and out. You can fine-tune each zoom's timing, strength and target, or add manual zooms, until the loop reads well at its final size. See how to zoom in on a screen recording for the technique.

Styling it to match your page

A raw screen capture rarely sits well in a designed hero section. In the Click & Record editor you can:

• Set a background that matches your page: a gradient or your own image.
• Add inset padding, corner radius and a shadow so the product floats on the background.
• Wrap it in a mock macOS or Windows browser frame with an editable URL bar showing your real domain.
• Crop out browser chrome or sidebars that add nothing.
• Choose the aspect ratio your layout needs: 16:9, 1:1, 4:5 or 9:16 for a mobile-specific version.
• Speed up slow segments so the whole loop stays short.

More detail is in adding a background and browser frame to a screen recording.

Export for fast loading

A hero video is often the heaviest asset on the page, so file size directly affects how fast your page feels. Practical steps:

• Keep it short. Every second of video adds weight.
• Record the loop with the microphone off. It plays muted anyway, so narration would only be wasted effort.
• Pick a moderate quality preset. Click & Record's export dialog shows resolution, bitrate and estimated file size before you render, so you can compare presets.
• Do not export larger than displayed. If the hero slot is about 800 pixels wide, a 4K export only adds bytes.
• Offer WebM and MP4. WebM (VP9) is often smaller; MP4 (H.264) is the universal fallback. See MP4 vs WebM for screen recordings and how to reduce screen recording file size.

Also take a screenshot of the finished state in the same styling to use as the poster image.

Embedding the hero video in HTML

For a silent loop, the key attributes on the <video> element are:

• autoplay and muted: browsers generally only allow autoplay for muted video, so you need both.
• loop: restarts automatically.
• playsinline: keeps it playing in place on iPhone instead of going full screen.
• poster: an image shown before the video loads, so there is no empty box.
• preload: hints how much to download up front.

A typical embed looks like <video autoplay muted loop playsinline poster="hero.jpg"> with a WebM <source> listed before the MP4 one. The browser uses the first format it supports. The MDN reference for the video element documents every attribute, and Chrome's autoplay policy explains when autoplay is allowed.

Accessibility

Give visitors a way to pause motion, and respect the prefers-reduced-motion setting by showing the poster instead of autoplaying for users who request it. For the narrated click-to-play version, add a captions track. Click & Record generates subtitles on your computer and exports a VTT file you can attach with a <track> element.

Make your hero video for free

Click & Record is a free Chrome extension that records, auto-zooms on clicks, styles and exports your product video locally, with no account and no watermark. If you already have footage, the free browser editor lets you trim, add manual zooms, backgrounds and frames, and export MP4 or WebM without installing anything. Then embed it, check the page on a phone and a slow connection, and adjust the preset if it loads too slowly.