Best Video Formats and Resolutions for Web Demos

For most web demos, the best video format is MP4 with the H.264 codec, because it plays everywhere without plugins and keeps file sizes small. Pair that container with 1080p resolution for landing pages and embeds, 720p when speed matters more than sharpness, and a 16:9 aspect ratio for desktop walkthroughs. The rest of this guide covers exactly which settings to pick and when to deviate from these defaults.

Why MP4 With H.264 Is the Safe Default

A "video format" is really two decisions stacked together: the container (the file wrapper, like .mp4 or .webm) and the codec (how the pixels are compressed, like H.264 or VP9). For product demos that live on the open web, MP4 + H.264 wins on compatibility.

Every browser, every phone, every email client preview, every CMS embed handles MP4/H.264 without you thinking about it. There's no "this video can't be played" message, no fallback file to maintain, no surprise on an older Android device.

You'll hear arguments for newer codecs, and they're not wrong:

• WebM (VP9 or AV1) compresses 20-40% smaller at the same quality, which is great for bandwidth.
• HEVC (H.265) is excellent for 4K but has patchy browser support and licensing headaches.
• AV1 is the future for streaming platforms but encodes slowly and isn't universal yet.

The catch is that none of them play everywhere the way H.264 does. For a demo you want a prospect to watch on the first click, reliability beats a smaller file. A common pattern is to serve WebM with an MP4 fallback in the <video> tag, but for most teams the MP4 alone is enough and far less work.

Quick reference: container and codec by use case

1. Website embed or landing page → MP4 / H.264 / AAC audio
2. Email or Slack share link → MP4 / H.264 (universal preview)
3. Bandwidth-critical streaming at scale → WebM/VP9 with MP4 fallback
4. Internal archive or master copy → keep a high-bitrate MP4 or ProRes original

1080p vs 720p: Which Resolution Should You Use

Resolution is the pixel count of your frame. The two that matter for web demos are 720p (1280×720) and 1080p (1920×1080).

Use 1080p when the demo shows UI detail: text fields, dashboards, settings panels, code, or anything a viewer needs to read. On a retina laptop screen, 720p text looks soft, and softness reads as "cheap" to a buyer evaluating your product. Most modern marketing demos default to 1080p.

Use 720p when load speed or storage is the priority, the content is motion-heavy rather than text-heavy, or you're embedding several videos on one page. A 720p file is roughly half the size of the same 1080p clip, which means faster first-frame playback on mobile.

Skip 4K for product demos in almost every case. The file is four times larger than 1080p, most viewers watch in a small embedded player, and the extra resolution is wasted. Save 4K for cinematic brand films, not feature walkthroughs.

A practical example: a 60-second screen recording of a SaaS dashboard at 1080p and a reasonable bitrate lands around 8-15 MB. The same clip at 720p is roughly 4-8 MB. Both load fast on broadband; the 720p version noticeably wins on a weak mobile connection.

This is also a place where your tool matters. InstaDemo generates narrated demo videos straight from a URL and exports clean MP4 output, so you get the right container without manually configuring an encoder.

Bitrate: The Setting That Actually Controls Quality

Resolution gets the attention, but bitrate (measured in megabits per second, Mbps) is what determines whether your video looks crisp or blocky. Two 1080p files can look completely different if one is starved of bitrate.

Sensible starting points for H.264:

• 720p, screen-recorded UI: 3-5 Mbps
• 1080p, screen-recorded UI: 6-10 Mbps
• 1080p, lots of motion (animations, scrolling): 10-12 Mbps

Screen recordings of mostly static interfaces compress beautifully because large areas of the frame don't change, so you can sit at the lower end. The moment you add fast scrolling or animated transitions, push the bitrate up or you'll see banding and smearing around the moving elements.

Constant vs variable bitrate

For web demos, use a single-pass or two-pass variable bitrate (VBR) encode with a sensible average and a capped maximum. VBR spends bits where the video needs them (busy frames) and saves them where it doesn't (a static screen). Two-pass takes longer to encode but produces the cleanest file at a given size, which is worth it for a hero demo on your homepage.

Aspect Ratios: Match the Platform, Not Your Recording

Aspect ratio is the shape of the frame, and getting it wrong is the fastest way to look unprofessional. The right ratio depends entirely on where the video will be watched.

• 16:9 (widescreen) — the default for desktop demos, YouTube, landing pages, and most embeds. Recording a browser or desktop app naturally produces 16:9.
• 9:16 (vertical) — for Instagram Reels, TikTok, YouTube Shorts, and mobile-first feeds. Don't crop a 16:9 demo to vertical; reframe the content so the important UI fills the tall frame.
• 1:1 (square) — a safe middle ground for autoplay-in-feed social posts that need to work on both mobile and desktop timelines.
• 4:5 (portrait) — takes up more vertical space in mobile feeds than 1:1, useful for paid social on Instagram and Facebook.

The mistake to avoid is stretching or letterboxing. If you shoot a 16:9 desktop walkthrough and then jam it into a 9:16 frame, you either distort the image or end up with thick black bars and a tiny, unreadable demo. Produce a purpose-built version for each platform instead, or at minimum design the original recording so the key UI sits in a central zone that survives cropping.

A simple platform cheat sheet

Frame Rate and Audio Settings That Round It Out

Frame rate: 30 fps is the sweet spot for screen-recorded demos. It looks smooth without bloating the file. Go to 60 fps only if you're showing fast animations or gameplay-style motion; for a UI walkthrough, 60 fps mostly just doubles your file size for no visible gain. Avoid 24 fps for screen content, where it can look slightly choppy during scrolling.

Audio: if your demo has narration, encode audio as AAC at 128-192 kbps. That's plenty for clear voice-over and keeps the file lean. Make sure your levels are consistent and normalized so viewers don't reach for the volume knob mid-demo. A narrated demo with crisp, even audio feels far more credible than a sharp video with muddy sound, which is why InstaDemo pairs its MP4 export with built-in AI narration generated from your site content.

Putting It All Together

You don't need to memorize codec tables to ship a good demo. For 90% of web demos, this single recipe works:

• Container/codec: MP4 / H.264 / AAC
• Resolution: 1080p (drop to 720p for speed)
• Bitrate: 6-10 Mbps for typical UI, two-pass VBR
• Aspect ratio: 16:9 for web, a dedicated 9:16 export for social
• Frame rate: 30 fps
• Audio: AAC, 128-192 kbps, normalized

Lock those defaults in, then make a vertical version only for the platforms that demand it.

The fastest way to get a clean, correctly formatted demo is to skip the encoder settings entirely and start from your live product. Drop your URL into InstaDemo and it will turn your site into a narrated demo video with web-ready MP4 output in minutes, so you can spend your time on the message instead of the bitrate. Give it a try and see your first demo render before your coffee gets cold.