How to Make a Product Demo Video for Your Website: Where It Goes, How to Record It and How to Ship It Without Slowing the Page

Key takeaways

• Show the product doing one job. HowdyGo's guide says product demo videos should run 60 to 90 seconds, and TechSmith says to leave the fine detail to separate tutorial videos.
• Make two versions, not one. A short, silent loop for the page and a longer one with sound behind a play button suit different visitors. HowdyGo describes a customer who made a quick overview and a detailed walkthrough for that reason.
• Muted video can autoplay. Chrome's autoplay policy says muted autoplay is always allowed, so the page version should carry its meaning in the picture and in captions.
• Weight is the part people forget. On motionshine.com, the desktop hero clip is 1.92 MB and the phone version is 0.64 MB. Smaller files for small screens are a small job with a big effect.
• Use a poster image. Google's web.dev says the poster of a video counts as a Largest Contentful Paint candidate, and a good LCP is 2.5 seconds or less.
• The recorder matters less than the plan. A free built-in Mac recorder can do the job, and paid tools mostly save editing time.

What a product demo video is for

A product demo video shows how a product works by showing it in use. TechSmith's guide says a demo does not need to outline every step, and recommends starting with a general overview that suits your whole audience, with deeper detail in separate tutorials.

On a website, that gives the video a narrow job: help a visitor who has read your headline understand, in under two minutes, what happens when they use the product. It sits beside your page copy and does not replace it. For how the pages around it fit together, see our guide to the five-page SaaS website structure.

Where the video goes on your site

The same recording rarely suits every page. This is our view, based on the pages we build, and not a published rule.

The pattern is the same as in our landing page structure guide: the first screen gets the shortest, simplest version, and the people who want more can choose it.

Plan it on one page

You do not need a long script. Write five lines before you record:

1. Who is watching, for example "an operations lead comparing three tools".
2. The one job the video shows, in a sentence.
3. The first thing on screen, which should be the result or the starting point of that job, not a log-in page.
4. Three to five steps, each one click or one decision.
5. The next action, such as "start free" or "book a demo". TechSmith's guide also says to end with one clear next step.

Cut anything that is not one of those steps. Features that matter to a smaller group of visitors belong in their own videos.

Record it

Set up the screen

• Use a clean browser profile or a demo account, with made-up names and data. Never record a real customer's records.
• Turn off notifications. TechSmith warns that recording system audio also records sounds such as email and message alerts.
• Close other tabs and hide the bookmarks bar. What is on screen is part of the video.
• Run through it twice before you record. Mistakes are quick to fix in rehearsal and slow to fix in the edit.

Use the free recorder first

On a Mac, Apple's support page says to press Shift-Command-5 to open the Screenshot tools, then record the whole screen, a window or a portion. The options let you choose a microphone and show the pointer or clicks, and recordings are saved as .mov files that you can trim. That is enough for a plain, honest clip.

What it does not do is follow your clicks with zooms or smooth the cursor, so on a busy screen the viewer may lose track of where to look. That is the main reason people reach for another tool.

Choose a recorder

One disclosure first: MotionShine, in this table, is a product of Amariq Studio, the team behind this site. We listed it next to the others using the same sources: each maker's own page, read on 18 October 2026.

Two notes on the table. First, MotionShine's figures come from its own page, and its own compare page describes how it checked the others, so treat the comparison as a vendor's view and check each maker's page before you buy. Second, none of these tools writes your script for you. The planning step above does more for the result than the choice of tool.

Edit it lightly

Four edits do most of the work:

• Cut the start and end so the first frame already shows the product.
• Zoom to the click. A viewer on a laptop or phone cannot read a small interface at full width. Auto zoom does this for you, and you can also add zooms by hand.
• Add captions. MotionShine's page says it generates captions on your Mac in more than 40 languages and can export .srt and .vtt files. Camtasia lists unlimited caption generation and Screen Studio lists a cloud transcript, so check how each handles it. Captions matter more on a page where the video plays without sound.
• Keep music low or leave it out. For a looping clip on a page, silence is fine.

Export at the size the video will be shown. A clip that appears 1,200 pixels wide on your page does not need 4K, and a smaller export is a faster page.

Put it on the page

This is the step most demo video guides skip. The details come from MDN's reference for the HTML video element and Chrome's autoplay policy.

Two cautions come from MDN. The preload setting is a hint and a browser may ignore it, and when autoplay is present, the autoplay setting wins and the browser needs to download the video. So a looping clip on the first screen will always download, which is why its file size matters.

What a live site does

On 18 October 2026 we read the markup and the file sizes on motionshine.com, the site for our own Mac recorder, where video is the product. Its demo clips are muted, loop, play inline and set preload to none. The hero has a desktop file of 1,922,181 bytes, about 1.92 MB, and a smaller file of 641,004 bytes, about 0.64 MB, for screens up to 767 pixels wide. Its before and after clip is 1,041,828 bytes on desktop and 328,443 bytes on phones. The page picks the right file from the media attribute on each source, with no script involved.

A phone user gets a file about a third of the size, and the preload setting asks the browser to hold back the clips that are not on the first screen.

A good LCP is 2.5 seconds or less, according to web.dev. The other Core Web Vitals targets are in our guide to the signs a website needs a redesign.

Hosted embed or your own file

A hosted embed is quick, and some demo tools give you an embed code for your page, as HowdyGo's guide describes. A file on your own domain gives you control over the poster, the file size and when it loads. Pick the hosted embed when you need analytics or sharing and the file when the video is a page-level design element, like a hero clip.

A pre-publish check

How we approach demo videos

At Amariq, we plan the video with the page it will sit on, so the first screen, the clip and the call to action are designed together. We set the clips up as part of the page, keep them light, and build the page so your team can swap a video without a developer. Our Webflow development page covers the builds, our conversion-focused redesign starts with the structure of the page, and our Flowtera SaaS concept shows the product-first approach. If you record on a Mac, you can try MotionShine free to see whether the zoom and cursor style suits your product.

Frequently asked questions

How long should a product demo video be?

HowdyGo's guide says 60 to 90 seconds. For a looping clip on a first screen, we suggest 10 to 20 seconds. If you need more time, make a series and keep each video to one task, as TechSmith recommends.

What should a product demo video show first?

The result, or the screen where the job starts. A visitor should see the product doing something useful in the first few seconds, so skip the log-in, the logo animation and the introduction.

Can I make a product demo video for free?

Yes. On a Mac, Shift-Command-5 opens a built-in recorder that can record a window or the screen with a microphone. MotionShine is free for unlimited recordings and exports up to 720p with no watermark, and Loom's Starter plan is free with a 5 minute limit. Check each maker's page for current limits.

Should a demo video autoplay on a website?

A short looping clip can, as long as it is muted, because Chrome says muted autoplay is always allowed. Keep the longer walkthrough behind a play button so the visitor chooses to hear it.

Do I need a voice-over?

Not for a looping clip. For the longer walkthrough, a clear voice-over helps, and captions help the people watching without sound.

Which format and size should I use for a website?

An MP4 at the size it will display, with a smaller version for phones. As an example, motionshine.com serves a 1.92 MB desktop hero and a 0.64 MB phone version. Add a poster image so the first frame appears while the file loads.

What is the best screen recorder for product demos on a Mac?

It depends on what you need. The built-in recorder covers a plain clip, MotionShine and Screen Studio add automatic zoom and a smooth cursor, and Camtasia offers a fuller editor. MotionShine is our own product, so compare the maker pages above before deciding.

Do demo videos help SEO?

A good video can add to what a page offers, but we do not rely on a published figure for how much. What you control is page speed: a heavy video can hurt your LCP, and a light one with a poster is much less likely to.