How to make a product launch video from your own website

A practical guide to scripting and producing a product launch video from your existing website, with aspect ratios, voiceover advice, and a checklist.

Launchkit9 min read

You already have the raw material for a launch video. Your website contains the headline, the screenshots, the proof points, and the brand. What it does not contain is a script, and that is where most launch videos go wrong.

The typical failure is a montage. Someone records thirty seconds of scrolling, adds a beat, overlays the logo, and calls it a launch. It looks like a product, but it never says what the product is for or why anyone should care.

A launch video is an argument, not a mood board. It has a structure, and the structure is the same whether the video is fifteen seconds or two minutes.

The five-part script

Hook: name the problem in one line

Open with the situation the viewer recognises, not the product name. "You shipped a landing page and nobody can find it" is a hook. "Introducing Launchkit" is an announcement, and announcements do not survive the scroll.

Keep the hook to one sentence on screen and roughly three seconds of narration. If the viewer does not recognise themselves in it, nothing later will recover their attention.

Problem: make the cost concrete

Spend a few seconds on what the problem costs. Not in abstract terms, but in the specific thing the viewer is doing wrong right now. "You are guessing which pages are indexed" is more useful than "SEO is hard".

This is where a screen recording of the messy current state works well: a spreadsheet, a crawl export, a blank dashboard. Show the workaround, then let the product replace it.

Solution: show the product doing the job

This is the only section that should feature the product interface, and it should show a real action with a visible result. Paste a URL, watch the audit appear, click the issue, see the fix. One complete action beats five disconnected feature shots.

Do not narrate every button. The viewer needs to understand the shape of the workflow, not memorise the UI.

Proof: give one reason to believe

Proof can be a concrete output, a before-and-after, a number from your own data, or a short customer statement. It should not be a stock testimonial with a fake-sounding name. If you do not have a real customer yet, show the output itself: the rendered video, the audit report, the generated copy.

Honesty here matters more than polish. A single specific detail is more convincing than three vague claims.

CTA: say exactly what happens next

End with one action. "Paste your URL and run a free audit" tells the viewer what to do and what it costs. "Learn more" does not.

Put the CTA on screen as text as well as in the voiceover. Many people watch muted, and the final frame is often the only one they read.

Run the checks yourself

Paste your URL and get the audit, not a checklist.

Launchkit checks metadata, canonicals, structured data, and Lighthouse in one pass.

Audit my site

What to capture from the website

You do not need a studio. You need clean source material.

  • The hero section, captured at a consistent viewport width so the layout does not jump between scenes.
  • Two or three product screens, showing real data rather than lorem ipsum. Redact anything private.
  • A result, such as a report, a generated asset, or a completed workflow.
  • Brand elements: logo, primary colour, typeface, and any illustration or icon set.

Record at a higher resolution than you need and crop down. A 1920×1080 capture scales cleanly to a 1080×1080 square or a 1080×1920 vertical cut. A 1280×720 capture starts to soften as soon as you punch in.

Extract the brand before you design

Before you open an editor, write down the palette and type. Pull the actual hex values from the site's stylesheet, not from a screenshot. Note the heading font and the body font, and use them in the video's text overlays.

This is the difference between a video that looks like the product and one that looks like a template with the logo dropped in. The type and colour do most of the work. If the site uses a warm off-white background, use that background rather than pure black.

Keep the overlay text short. Video text is read at a glance, so a headline plus one supporting line is usually enough.

Voiceover or captions

Both have a place, and the choice depends on where the video will run.

Voiceover suits a launch page, a sales call, or a conference. It carries tone and can explain a nuance that text cannot. It also takes longer to produce and is harder to update when the product changes.

Captions only suit social feeds, where most viewing is muted. They are faster to produce, easier to localise, and trivial to revise. The risk is that a silent video with no music can feel flat, so use motion and pacing to carry attention.

The practical answer for most teams is captions-first. Write the script as on-screen text, then decide whether a voice track adds anything. If it does, record it against the locked picture. If it does not, ship the captioned version and keep the script as the source of truth.

If you do use voiceover, add captions anyway. Accessibility and muted viewing are both real, and the cost is small.

Aspect ratio and length by channel

There is no universal length. There is a length that fits the channel and the viewer's intent.

Channel Ratio Practical length What works
Landing page hero 16:9 45–90s Full story, sound on
Product Hunt / launch post 16:9 30–60s Problem, product, CTA
LinkedIn feed 1:1 or 4:5 20–45s Captions, one idea
X / Twitter 16:9 or 1:1 15–30s Hook and result
Shorts / Reels / TikTok 9:16 15–30s Vertical framing, fast cuts
Sales follow-up 16:9 60–120s Specific workflow, no fluff

Shoot or capture for the widest ratio you will use, then frame the important content inside a safe centre area. A 16:9 capture can be cropped to 9:16, but the crop will cut the sides. Plan for that before you record.

A production checklist

  1. Write the script first. One sentence per beat, read aloud to check timing.
  2. Capture the site at a consistent viewport, with real content and no private data.
  3. Extract the exact brand colours and fonts from the stylesheet.
  4. Build a storyboard of five to seven frames before editing.
  5. Record the product action in one take if possible, then trim the waiting.
  6. Add captions and check them at mobile size.
  7. Render one 16:9 master and one vertical cut.
  8. Watch the final file muted, on a phone, before you publish.
  9. Put the CTA on the last frame and in the description.
  10. Keep the script and project file so the next launch takes hours, not weeks.

The most common production mistake is starting with footage. Starting with the script forces you to decide what the video argues before you decide what it shows. That order saves time and produces a video that can survive being watched without sound.

If you would rather not assemble the pieces by hand, Launchkit captures your site, extracts the brand, writes the script, and renders the video. For the SEO side of the same launch, see the technical SEO audit checklist. Details on what is stored during capture are in the privacy policy.

ShareXLinkedIn

Keep reading

Launchkit

Turn this into a ranked page and a launch video.

Audit the site you already have, fix what is measurable, then render a video from your own brand and pages.

Start free