How to Make a Demo Video for Your Website or SaaS App

A demo video for your website or SaaS app has two jobs: show a visitor what the product does faster than your copy can, and not slow down the page that is trying to convert them. Most guides cover the first job and ignore the second. This one covers both, step by step: choosing the flow, scripting, recording cleanly, adding zoom and captions, export sizes, and the HTML to embed a demo video without hurting page speed.

How to make a demo video for your website: eight steps

1. Pick the flow that proves your headline, and decide between a muted hero loop, a full demo behind a play button, or short feature clips.
2. Script it: a shot list for a loop, a two-column script for a narrated demo.
3. Prepare a clean browser profile and a demo account with realistic data.
4. Record a window or tab at a size where text stays readable.
5. Edit: cut dead air, zoom in on each action, add captions.
6. Export a master, then small web versions: MP4 (H.264), optional WebM, and a poster image.
7. Embed with muted, playsinline, a poster, and lazy loading below the fold.
8. Check page weight, layout shift, and a pause control.

1. Pick the flow (and the format)

Start from the headline of the page the video will sit on. If the headline says “Send invoices in 30 seconds”, the video shows an invoice being sent in about 30 seconds. The most common mistake with SaaS demo videos is showing the product's whole navigation instead of the one outcome the page is selling.

Then choose the format, because each has a different length, sound setting and embed:

Most SaaS landing pages need a hero loop and a full demo. Record the full demo first, then cut the loop and the feature clips out of it.

2. Script it

A hero loop has no voice, so write a shot list, not a script:

1. Open on the most recognisable screen of your product. Never a login page.
2. Do the one action that produces the outcome in the headline.
3. Hold the result on screen for about two seconds.
4. Return to the starting state so the loop restarts without a visible jump.

A full demo gets a two-column script (what is on screen, what you say) with five beats: hook, outcome, three steps, proof, call to action. We published a copy-paste template with a worked example in how to record a product demo. Read it aloud with a timer; if it runs over 90 seconds, cut words.

3. Clean browser, clean data

Website and SaaS demos are recorded in a browser, and browsers leak personal details into recordings. Before recording:

• Create a separate browser profile for demos. Chrome, Edge and Firefox all support profiles. Keep it with no bookmarks bar, no extensions pinned to the toolbar, no history and no saved passwords, so the address bar doesn't autocomplete something personal.
• Use a demo workspace with realistic, invented data. Believable company names, amounts and recent dates. Never real customer data, even blurred: blur is easy to miss for a single frame.
• Dismiss everything that pops up: cookie banners, chat widgets, product tours, “what's new” modals, and browser prompts to save a password or allow notifications.
• Turn on Do Not Disturb and quit Slack, mail and messages.
• Pre-create the state you need, so nothing loads or builds on camera. A small script that resets the demo account lets you re-record in minutes when the UI changes.
• Pick light or dark mode on purpose and match your landing page. A dark product video on a white page (or the reverse) looks like a hole in the layout.

4. Record

Record a single window or tab rather than a full high-resolution display. A 27-inch display recorded full-screen and shown in a 700-pixel-wide slot on your page makes every label unreadable. Size the browser window to about 1280×800 to 1440×900, or raise the page zoom to 110–125%, and record that.

When you fumble a step, pause, redo it and cut the mistake later. It is faster than restarting. Check your mic before a narrated take; our free webcam and mic test shows a live level meter in the browser without recording anything.

5. Zoom and captions

Three edits do most of the work on a website demo video:

1. Cut dead air. Loading spinners, typing corrections, hesitations. If nothing changes on screen for two seconds and nobody is talking, cut it.
2. Zoom in on each action. Zoom in as something happens and pull back when the viewer needs context. For a hero loop, one or two zooms are usually enough; more feels busy in a small slot. ZoomCap's CLI places zooms from your clicks and typing as you record, and in its browser recorder or any keyframe editor you set them by hand; our guide on zooming in on a screen recording covers both.
3. Captions for the narrated demo. Many visitors will watch muted. Burn captions into the video or ship a WebVTT <track>, and proofread product names, which speech-to-text often gets wrong. ZoomCap generates captions in your browser with Whisper and burns them into the export.

Then frame it: a background colour that matches your site, some padding and rounded corners make a raw capture sit naturally on a landing page. Keep the same style for every clip on the page. In ZoomCap these are editor settings you can save as a style preset and reuse on every clip.

6. Export sizes

Export one high-quality master (1080p or 1440p H.264 MP4), then make small web versions from it. Page weight is the constraint here, not quality: a 40 MB hero video will hurt your load time on mobile no matter how good it looks.

With ffmpeg, the three web files look like this (adjust the CRF up for smaller files):

# MP4 (H.264): plays everywhere
ffmpeg -i master.mp4 -t 15 -vf "scale=1280:-2,fps=30" \
  -c:v libx264 -profile:v high -crf 26 -preset slow \
  -pix_fmt yuv420p -movflags +faststart -an demo.mp4

# WebM (VP9): usually smaller, for browsers that support it
ffmpeg -i master.mp4 -t 15 -vf "scale=1280:-2,fps=30" \
  -c:v libvpx-vp9 -crf 36 -b:v 0 -row-mt 1 -an demo.webm

# Poster: one frame from 2 seconds in
ffmpeg -ss 2 -i demo.mp4 -frames:v 1 -q:v 3 demo-poster.jpg

-an drops the audio track, which both shrinks the file and removes any doubt about muted autoplay. +faststart moves the index to the front so playback can begin before the file finishes downloading. -pix_fmt yuv420p keeps the MP4 playable in every browser. Our MP4 vs MOV vs WebM guide explains the codec choices in more depth.

If you would rather not use a terminal, our free video compressor re-encodes a file in your browser with three presets (full size at about 4 Mbps, 75% size at about 2 Mbps, half size at about 1 Mbps). It runs in real time on your machine, so a 60-second video takes about 60 seconds, and it outputs MP4 where your browser can encode it, otherwise WebM. It does not trim or remove audio, so do those in your editor first.

7. Embed it

The hero loop (above the fold)

<video autoplay muted loop playsinline
       width="1280" height="800"
       poster="/video/demo-poster.jpg">
  <source src="/video/demo.webm" type="video/webm">
  <source src="/video/demo.mp4" type="video/mp4">
</video>

• muted and playsinline are what allow autoplay: Chrome allows muted autoplay (Chrome's autoplay policy), and Safari on iPhone autoplays only muted or silent video and needs playsinline to play inside the page (WebKit's video policies).
• width and height reserve the space before the video loads, so the page doesn't jump (a layout shift).
• The browser plays the first <source> it supports, so put the smaller WebM first and the MP4 second as the fallback. If you only ship one file, ship the MP4.
• Autoplay causes the browser to fetch the video regardless of preload, which is why the hero loop should be the smallest file you can make.

Feature clips (below the fold): lazy-load and play when visible

loading="lazy" works on images and iframes but not on <video>. Use preload="none" without autoplay, and start playback when the clip scrolls into view:

<video muted loop playsinline preload="none"
       width="1280" height="800"
       poster="/video/feature-poster.jpg"
       data-play-in-view>
  <source src="/video/feature.webm" type="video/webm">
  <source src="/video/feature.mp4" type="video/mp4">
</video>

<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const io = new IntersectionObserver((entries) => {
    for (const e of entries) {
      if (e.isIntersecting && !reduce) e.target.play().catch(() => {});
      else e.target.pause();
    }
  }, { rootMargin: "200px" });
  document.querySelectorAll("video[data-play-in-view]")
    .forEach((v) => io.observe(v));
</script>

With preload="none" the browser downloads only the poster until play() is called. Visitors who never scroll that far never download the clip, and visitors who ask for reduced motion see the poster instead of a moving loop.

The full demo: click to play

For the narrated 60–90 second demo, don't autoplay. Show the poster with a play button and start on click, with controls and preload="none" (or "metadata" if you want the duration shown). If you host it on YouTube or Vimeo, load the embed only when the visitor clicks the thumbnail (often called a facade); a standard YouTube iframe loads a large player script up front, even for visitors who never press play.

A note for React and Next.js

React has historically set muted as a property rather than writing it into server-rendered HTML, so a video can fail to autoplay on iPhone until the page hydrates, or at all. If your hero loop doesn't autoplay in production, view the page source and check that the muted attribute is actually there.

8. Page-speed and accessibility checks

• Check the network tab on a throttled mobile connection. The hero loop should be the only video that downloads on load.
• Serve from a CDN with long cache headers, and make sure your server supports range requests so the browser can fetch the start of the file first.
• Use a poster so the slot is never blank, and keep it small.
• Consider a still image on small screens if the loop is purely decorative.
• Give moving video a pause control. WCAG's “Pause, Stop, Hide” criterion asks for a way to pause auto-playing motion that lasts more than five seconds (W3C's explanation). A small pause button over the loop is enough.
• Add text alternatives. An aria-label describing what the loop shows, and captions or a transcript for the narrated demo.
• Never autoplay with sound. Browsers block it anyway, and visitors who hear it leave.

Tools for website demo videos

What a dedicated demo recorder saves is the time spent on zooms, cursor, captions and framing. We recommend ZoomCap for website demos, and we make it.

Why ZoomCap

The free browser recorder captures a tab, window or screen in Chrome or Edge on any OS; because a browser only sees clicks inside its own tab, you place zooms by hand there. The CLI (npx zoomcap record, macOS and Linux X11, paid) records clicks and typing so the editor zooms automatically. The editor adds backgrounds, padding, rounded corners, captions generated in your browser with Whisper, and exports H.264 MP4 from 720p to 4K, or GIF, which is the master you cut the web files from in step 6. It costs $29 once (or $12.49/month); the free plan includes 2 watermarked exports a month. It doesn't host video or export WebM, so you run the ffmpeg step above for a WebM version.

The other tools below were not hands-on tested by us; their details come from the vendors' own sites, checked in September 2026.

If you need something ZoomCap doesn't do: if you want the demo to live on a hosted page you can link to and edit after publishing, Tella is built for that (Pro $26/user/mo, cloud-based). If you need motion blur on a Mac, Screen Studio has it according to its site. If the budget is strictly zero, OpenScreen is free and open source. Our best screen recorder for product demos roundup compares nine options by use case.

Recording inside your product often means recording things you would not want on someone else's server. ZoomCap edits and encodes in the browser and never uploads the recording; the security page describes the data flow. Payments go through Dodo Payments, and there is a 14-day refund if it doesn't work for you (refund terms).

Frequently asked questions

Launching on Product Hunt too? See how to make a Product Hunt launch video. If your demo looks soft after export, these 12 fixes cover the usual causes, and the pricing page lists what each ZoomCap plan includes.

Make your website demo

Record your demo free in the browser, with nothing to install, and export a master to cut your hero loop from. For automatic zoom from your clicks and typing, unlimited exports and no watermark, it's $29 once on the pricing page.