Demo Video Formats and Device Frames by Channel
Render a landing-page demo as 16:9 in a browser frame, a feed post as 1:1 or 4:5 with no frame, and a story as 9:16 in a phone frame recorded on a mobile device. That covers most channels; the table below has the rest, with the style preset that fits each. The point of knowing this is that one recording should produce all of them: record the flow once, render it per channel.
What are the four formats?
| Format | Pixels at 1080p | Reads as |
|---|---|---|
| 16:9 | 1920 x 1080 | A screen. Landing pages, YouTube, docs, slides |
| 9:16 | 1080 x 1920 | A phone. Stories, Reels, Shorts, TikTok |
| 1:1 | 1080 x 1080 | A feed tile. X, LinkedIn, Instagram feed |
| 4:5 | 1080 x 1350 | A tall feed tile. Instagram and LinkedIn feed, takes more screen than 1:1 |
On Klevo’s free plan the long side is 1280 px (720p) and the frame is the device’s own (a browser window on desktop, a phone on mobile); Pro renders the sizes above and picks any frame or none, the style and the background.
What are the five frames?
- Browser: a window with three dots and the host in the address bar. The default for desktop recordings; it tells the viewer “this is a web app” at a glance.
- Phone: rounded corners, a notch, side buttons. For mobile recordings in 9:16 or 16:9.
- Android: the same idea with a hole-punch camera, for audiences where that reads more naturally.
- Tablet: a thin bezel around a tablet viewport.
- None: the page fills the canvas with rounded corners. Best when the clip is small (a 1:1 feed tile) and a frame would waste pixels.
Auto picks browser for desktop, phone for mobile and tablet for tablet.
Which combination for which channel?
| Channel | Device | Format | Frame | Style | Notes |
|---|---|---|---|---|---|
| Landing page hero | Desktop | 16:9 | Browser | Smooth | Loops muted; 3 to 5 steps |
| Landing page, mobile section | Mobile | 9:16 or 16:9 | Phone | Smooth | A phone in a 16:9 canvas sits on the brand background |
| Product Hunt gallery | Desktop | 16:9 | Browser | Smooth | First slot; 5 to 8 steps |
| X and LinkedIn feed | Desktop | 1:1 or 4:5 | None | Snappy | Plays small and muted; key click first |
| Instagram feed | Desktop or mobile | 4:5 | None | Snappy | 4:5 takes the most feed height |
| Stories, Reels, Shorts, TikTok | Mobile | 9:16 | Phone | Smooth | Captions at the top, under the UI chrome |
| Changelog entry | Desktop | 16:9 | Browser | Snappy | 2 to 4 steps |
| Onboarding email | Desktop | 16:9 | Browser | Smooth | Link to it; email clients rarely autoplay |
| Help article | Desktop | 16:9 | Browser | Minimal | No zoom, literal captions |
| Slide deck | Desktop | 16:9 | None | Minimal | The deck provides the frame |
Why is device not the same as format?
A common mistake is to render a desktop recording as 9:16 and call it a mobile demo. The page is still 1440 px wide; the renderer has to crop or letterbox it and the result is unreadable. Device and format are separate choices: the device decides how the app itself lays out (desktop at 1440 px, mobile at a phone width with touch), the format decides the canvas the frame sits in. A mobile device in a 16:9 canvas is a legitimate and attractive combination: the phone stands on the brand background with room on both sides. Recording a mobile demo of a responsive web app shows how to ask for it.
What do the styles change?
- Smooth: eased cursor, a 1.6x zoom on the clicks you mark, cross-fades, intro and outro cards. The default.
- Snappy: faster cursor, zoom on every click, cuts. For short feed clips.
- Minimal: cursor and captions only, no zoom, no cards. For reference clips and decks.
Phones get a gentler zoom in every style, since the viewport already fills the frame.
How do you get every channel from one recording?
With Klevo, formats are a property of the render, not the recording. The flow is recorded once as a script; each render replays it in a fresh browser with the device and output you ask for:
Render script abc123 again as 9:16 on a phone frame, mobile device, smooth.
Render it 1:1 with no frame, snappy style, for a LinkedIn post.
Each render counts as a video for the month, because it runs the browser again, but nothing has to be recorded by hand. Demo videos that never go stale explains how that same property keeps the whole set current after a release. How long should a demo be and captions that explain a flow cover the two other decisions that change per channel.
FAQ
Can I pick the background color? On Pro, yes: the intro and outro cards and the space around the frame use your brand color (“brand color #2F6DF6”), or a solid color or a two-color gradient of your own. Free uses the default orange.
What about a watermark? The free plan draws a small klevo.si mark in the corner; Pro does not. Re-rendering after an upgrade removes it from an existing script.
Does 4K exist? Not yet. 1080p is the top size, which is what every channel above compresses to anyway.
Can a desktop recording go in a phone frame? It renders, but the page is laid out for 1440 px and will be unreadable. Record on the mobile device instead.