Landing Page Video: Best Practices + 5 Real Examples

A landing page video can explain your product faster than any headline, or it can slow the page down and get ignored. The difference is mostly in the details: where it sits, how long it runs, whether it plays on its own, and how it is loaded. This guide covers those decisions for SaaS landing pages, with copy-paste markup and five real landing page examples with video.

Should your landing page have a video?

Video earns its place when your product is easier to show than to describe. That is true for most software: a few seconds of the interface in motion answers 'what does it actually look like?' better than three paragraphs. It is especially useful when:

• Your product is new or the category is unfamiliar, so visitors need to see it to understand it.
• The core value is a workflow (click, then this happens) rather than a single screen.
• Visitors arrive from ads or social posts and decide quickly whether to stay.
• You sell to buyers who want proof the product exists and works before booking a call.

Skip it, or keep it small, if the video would only show stock footage, a talking head repeating the headline, or an animated logo. A video that adds no information is just a heavier page.

Where to put a landing page video: hero or below the fold?

There are two common placements, and they do different jobs.

In the hero

A video in the hero is the first thing visitors see next to your headline and call to action. It works best as a short, silent, looping clip of the product in use, so it reinforces the headline instead of competing with it. Keep the primary button visible next to or above it; the video supports the call to action, it does not replace it.

Below the fold

Further down the page, video works well for explaining specific features. Short loops placed beside each feature description let visitors see each one in action as they scroll. A longer click-to-play demo or explainer fits here too, for visitors who are interested enough to scroll and want the full walkthrough.

A common, effective setup is both: a short ambient loop in the hero, and a fuller click-to-play product demo video lower on the page or behind a 'Watch demo' button.

How long should a landing page video be?

These are working ranges, not rules. The real test is whether every second shows something new. If a scene repeats what the previous one said, cut it. For loops, make the last frame flow back into the first so the restart is not jarring.

Autoplay, sound and captions

Browsers generally block autoplay with sound, so an autoplaying landing page video must be muted. On iOS it also needs the playsinline attribute, or it will try to open full screen. That means your hero video has to make sense with no audio at all.

• Design for silence. Use on-screen text, highlights and zooms to tell the story, rather than relying on narration.
• Burn in captions for autoplay loops. A muted video with voice-over is useless without captions visible on screen.
• Add a caption track for click-to-play videos. Use a WebVTT file with a track element so viewers can turn captions on, and so the video is accessible to deaf and hard-of-hearing visitors.
• Never autoplay with sound. Even where it might work, it is a reliable way to make people close the tab.

Choose a poster frame that works on its own

The poster is the still image shown before the video plays or loads. Many visitors will only ever see the poster: on slow connections, with data saver on, or when they scroll past before playback starts. Treat it as a designed image, not a random first frame.

• Pick a frame that shows the product's key screen clearly.
• Export it as an optimised WebP or AVIF at the size it is displayed, not a full-resolution screenshot.
• For click-to-play videos, add a clear play button and the video length, so visitors know what they are committing to.
• Match the poster's aspect ratio to the video so nothing jumps when playback begins.

Landing page video performance: keep the page fast

A video is usually the heaviest thing on a landing page. Handled carelessly, it slows the first render, hurts Core Web Vitals and costs mobile visitors their data. A few habits avoid most of that.

Don't let the video block LCP

Largest Contentful Paint measures when the biggest visible element finishes rendering. For a hero video, that element is usually the poster image or first frame. Make the poster small and fast, and load it early so the hero looks complete before the video file arrives. The video itself can stream in afterwards.

Lazy load everything below the fold

Videos further down the page should not download until the visitor scrolls near them. Use preload='none' and start playback with an IntersectionObserver when the video enters the viewport. For YouTube, Vimeo or Wistia embeds, show a lightweight thumbnail facade and only load the player iframe on click; embedded players pull in a lot of script.

Keep file sizes small

• Export hero loops at the size they are displayed, and keep them short.
• Remove the audio track from silent loops entirely.
• Serve H.264 MP4 for broad compatibility, with a WebM or AV1 source first for browsers that support it.
• Serve from a CDN with caching headers, not from your app server.
• Consider a smaller version for mobile, or just the poster on very small screens.

Reserve the space

Set width and height (or an aspect-ratio in CSS) on the video element so the layout does not shift when it loads. Layout shift from late-loading media is a common cause of poor Cumulative Layout Shift scores.

<video
  autoplay
  muted
  loop
  playsinline
  preload="metadata"
  poster="/media/hero-poster.webp"
  width="1280"
  height="720"
  aria-label="Short demo: creating a report in three clicks"
>
  <source src="/media/hero.webm" type="video/webm" />
  <source src="/media/hero.mp4" type="video/mp4" />
</video>

<video
  controls
  preload="none"
  poster="/media/explainer-poster.webp"
  width="1280"
  height="720"
>
  <source src="/media/explainer.mp4" type="video/mp4" />
  <track kind="captions" src="/media/explainer.en.vtt" srclang="en" label="English" default />
</video>

Make your landing page video accessible

• Give visitors a way to pause. Under WCAG, moving content that starts automatically and lasts more than five seconds needs a way to pause, stop or hide it. A small pause button on the hero loop covers this.
• Respect reduced motion. If a visitor has prefers-reduced-motion set, show the poster instead of autoplaying.
• Caption anything with speech, and offer a transcript for longer explainers.
• Label silent loops. An aria-label that describes what the clip shows helps screen reader users; purely decorative loops can be hidden with aria-hidden.
• Don't put essential information only in the video. Your headline, pricing and call to action should all work as text.

What to show in a landing page video

For a SaaS landing page, the product is the star. A simple structure that works for most hero videos and explainers:

1. The outcome. Open on the finished result, such as the report, the published page or the closed ticket, so visitors see the payoff first.
2. The core workflow. Two or three steps that get there, shown in the real interface with zooms on what matters.
3. One differentiator. The thing competitors do not do, shown rather than claimed.
4. The next step. End on your call to action text, matching the button on the page.

If you want a longer, narrated piece that explains the problem before the product, that is an explainer; see our guide to SaaS explainer videos for structure and scripting.

5 landing page examples with video

These video landing page examples are live homepages. Descriptions are based on each page's markup and layout at the time of writing, and sites change often, so treat them as patterns to look at rather than fixed templates.

1. Descript: hero video with a poster

Descript's homepage uses a muted, looping video in the hero with a dedicated poster image, and does not preload the video file. Pattern: a designed poster carries the first impression while the video loads in the background.

2. Notion: product video as hero media

Notion's homepage uses a muted, looping product video as the media in its hero section. Pattern: the hero video shows the product itself, not a brand film.

3. Loom: short loops beside each feature

Loom's homepage uses several small, muted, looping clips inside its feature sections, each animating one specific part of the product. Pattern: below-the-fold feature loops instead of one long video.

4. Tella: hero product demo, lazy loaded

Tella's homepage shows a product demo video in the hero with a WebP poster, and sets its videos not to preload. Pattern: a performance-conscious setup where the poster renders immediately and the video follows.

5. Screen Studio: the product's output as proof

Screen Studio's homepage opens with a hero recording and then shows a large gallery of muted, looping videos, each labelled for screen readers with what it shows. Pattern: for a product that creates videos, the examples are the pitch.

Landing page video checklist

• The video shows the real product, not stock footage.
• The hero loop is short, muted, looping and has playsinline.
• It makes sense with the sound off; captions are burned in or available.
• The poster is a designed, optimised image that works on its own.
• Below-the-fold videos and embeds are lazy loaded.
• Width and height are set, so there is no layout shift.
• There is a pause control and reduced-motion fallback.
• The call to action is visible without watching the video.

For more on structuring the demo itself, read how to make a product demo video.