How to record a website demo for X
16:9 inline, heavily re-encoded, and judged in about two seconds.
Record websites for X at 1920 x 1080 (16:9), which is the frame the timeline renders inline without cropping. The constraint that matters more than size is compression: X re-encodes aggressively, so fine type and low-contrast UI degrade visibly. Record tighter than feels necessary and the loss is far less obvious.
The frame to record at
1920 x 1080
16:9 · landscape
16:9 is what the timeline embeds inline at full card width, so the recording plays at its native shape rather than being letterboxed or cropped to a preview.
Why X (Twitter) is different
X compresses video harder than any other destination on this list, and it plays inline at a fraction of full screen. Both punish detail. A recording that shows a whole dashboard at 1920 wide arrives as an illegible smear; the same recording framed on one panel survives intact. Recording tighter is not a stylistic choice here, it is a technical one.
How to record it, step by step
Open the site in Viewport
Paste the URL into Viewport and let the page load completely. Waiting for fonts, images and entry animations to settle before you record is what stops the first second of the take looking half-built.
Frame it at 1920 x 1080
Set the recording size to 1920 x 1080 (16:9, landscape) before you record. 16:9 is what the timeline embeds inline at full card width, so the recording plays at its native shape rather than being letterboxed or cropped to a preview.
Place the interactions on the timeline
Add the scrolls, clicks and hovers you want as points on the timeline rather than performing them live. Each one is a position and a moment, not a gesture you have to land.
Adjust the timing until it reads
Drag the points to change pacing. Viewport interpolates the motion between them, so a scroll that felt rushed becomes a scroll that reads - without reshooting anything.
Play it back and export
View the export at inline size, not full screen. If small type is unreadable there, tighten the frame and re-render rather than uploading and hoping.
X (Twitter) video specifications
| Recommended resolution | 1920 x 1080 px |
|---|---|
| Aspect ratio | 16:9 (1:1 and 9:16 also supported) |
| Maximum length | 2 minutes 20 seconds on standard accounts |
| Format | MP4 (H.264) or MOV |
| Playback | Autoplays muted inline |
Source: X Help Center. Checked . Third-party pricing and limits change; confirm at the source before relying on them.
Three things that make the difference
Frame tighter than the design deserves
Inline playback plus re-encoding means anything smaller than about 16px on screen is gone. Zoom the frame onto the part you are actually talking about.
Land the hook before two seconds
Autoplay starts as the post scrolls into view and most of the audience is gone by the third second. Put the interesting transition first and the context second.
Avoid low-contrast dark UI
Compression artefacts are most visible in flat dark gradients, which is exactly what most product UI is made of. Raising contrast slightly before recording survives the encoder better.
Recording for X (Twitter), answered
Frame it at 1920 x 1080 before you record.
Viewport sets the recording size first, so the site lays itself out at that width instead of being cropped afterwards. Then you build the scroll on a timeline and it plays back the same way every take.
Usual price $19.99 founder discount · macOS 13.1 or later
Related guides
For LinkedIn, record websites at 1080 x 1080 (1:1) or 1080 x 1350 (4:5) rather than 16:9. The feed is a narrow column on mobile, and a square or portrait video occupies substantially more vertical space than a landscape one - which is the single largest lever on how long the post stays on screen.
Record Product Hunt gallery media at 1920 x 1080 (16:9). The gallery autoplays muted beside your tagline, and it is doing a specific job: showing what the product does before anyone reads a word. A recording that opens on a landing page rather than on the product working is the most common launch-day mistake.
To record a website for Instagram Reels, capture it at 1080 x 1920 pixels (9:16, vertical) rather than recording a desktop browser and cropping afterwards. On a Mac, Viewport sets that frame before recording, so the site lays itself out at vertical width and fills the Reel edge to edge instead of sitting in a letterboxed strip.