How to make a homepage hero video for your SaaS website

The hero video answers the question every visitor has in the first few seconds: what does this product actually look like? Your headline says what you do. The video proves it with the real interface moving. It does not replace the headline, and it should never be the only place your value proposition lives, because some visitors will only ever see the poster frame, a slow-loading box or nothing at all.

Most SaaS sites get the best of both by using two videos:

• A silent loop of 12 to 20 seconds that autoplays muted in the hero. It shows three or four product moments and starts over without a jarring jump.
• A narrated version of 30 to 45 seconds behind a Watch the video button or in a modal. It adds voiceover, music and a fuller story for visitors who chose to watch.

Keep your call to action in the page HTML next to the video, not inside it. A button drawn into a video looks clickable and is not.

Browsers decide whether your hero video can start on its own, and the rules favor silent video. Chrome's autoplay policy states that muted autoplay is always allowed, while autoplay with sound depends on conditions such as the visitor having already interacted with the site. On iPhone, Safari lets a muted video autoplay without a tap, and the playsinline attribute keeps it playing in the page instead of jumping to fullscreen.

So a hero loop needs four attributes on the video element, autoplay, muted, loop and playsinline, plus a poster image for the moment before playback starts.

Two accessibility points matter too. WCAG 2.2 success criterion 2.2.2 says that moving content which starts automatically, lasts more than five seconds and sits alongside other content needs a way to pause, stop or hide it, so add a visible pause button. And respect the reduced motion setting: when a visitor's system asks for reduced motion, show the poster image instead of playing the loop.

A hero video sits at the top of your most visited page, so its weight shows up directly in load time. Google's Largest Contentful Paint guidance treats 2.5 seconds or less as good, and for a video element it counts the poster image load or the first frame, whichever comes first. A light, compressed poster that matches the first frame is the cheapest speed win you have.

• Export at 1080p, not 4K. The hero rarely displays wider than a laptop screen, and 4K multiplies the file size for no visible gain.
• Remove the audio track from the loop file. A muted video still downloads its audio unless you strip it out.
• Compress for the web. Serve an H.264 MP4, optionally with a smaller WebM listed first.
• Keep the loop short. Every extra second adds bytes. Aim for a loop of a few megabytes and test the page on a throttled mobile connection.
• Load the narrated version only on click, from a video host or CDN, so it never competes with the page.

Because nobody hears the hero video, the visuals and on-screen text carry everything. Plan four or five scenes that each make one point you could say in a few words, and keep the type large: the video often renders at half the width of the screen or less, so small interface text becomes unreadable.

• Start with context. Logo, one short line and the product together, so a visitor who glances once still gets it.
• Show the product doing something. Data arriving, a status changing, a panel filling in. Motion should mean progress, not decoration.
• Zoom in on one detail. A close-up of the component that matters reads better at hero size than a full page.
• End on a calm frame. A logo scene or a still product shot makes the jump back to the start feel intentional.

Avoid repeating your headline word for word inside the video. Let the headline make the claim and the video show the proof.