Safe Zones & Chapters Runs Locally in Your Browser

Shorts / Reels / TikTok 9:16 Safe Zone Previewer

Upload a 9:16 frame or test composition on an interactive HTML5 canvas to check whether captions and graphics are occluded by TikTok, Instagram Reels, or YouTube Shorts UI buttons.

Interactive Workspace: 9:16 Safe Zones 100% Local Browser Processing (Zero Server Upload)
PASS: Caption clears all platform overlays.
Safe Box: 840x1190 px

Methodology, Formulas & Parameter Reference

Unlike traditional 16:9 broadcast television, where SMPTE ST 2046-1 defines a symmetric 90% Title Safe and 93% Action Safe border, vertical 9:16 short-form video platforms overlay asymmetric, opaque interface controls directly over the bottom and right edges of the 1080x1920 video raster. Because each platform anchors its avatar column, like/comment/share buttons, caption drawer, audio marquee, and top search bar at slightly different pixel coordinates, a burned-in subtitle placed at the standard bottom-10% mark (\(Y = 1728\text{ px}\)) is guaranteed to collide with the creator handle or caption text.

Across TikTok, Instagram Reels, and YouTube Shorts on modern 19.5:9 smartphones, the Universal 9:16 Title Safe Zone within a 1080x1920 frame requires reserving at least 250 px from the top edge (clearing status bars, live badges, and camera/search icons), 420 px to 480 px from the bottom edge (clearing multi-line descriptions, audio tickers, and shop pills), 60 px from the left edge, and 180 px from the right edge (clearing the vertical action button stack). This leaves a guaranteed unobstructed safe box of 840x1210 pixels anchored at X = 60, Y = 250.

1080x1920 Vertical Raster Occlusion Margins by Platform
Platform Overlay Top Unsafe Margin Bottom Unsafe Margin Right Unsafe Margin Recommended Caption Y-Band
TikTok (Feed + Audio Pill) 220 px (0..220) 460 px (1460..1920) 170 px (910..1080) Y = 1280 to 1420 px
Instagram Reels 210 px (0..210) 440 px (1480..1920) 160 px (920..1080) Y = 1300 to 1440 px
YouTube Shorts 240 px (0..240) 420 px (1500..1920) 180 px (900..1080) Y = 1300 to 1450 px
Universal Cross-Post Safe Box 250 px 480 px 180 px (Left: 60 px) Safe Box: 840x1190 at (60, 250)

Production Workflow Verification & Quality Control

Before committing a full batch transcode or publishing a final master, verify the generated parameters against a five-second test slice of your source timeline. In post-production pipelines, container metadata headers, variable frame rate (VFR) timebases from mobile or screen-capture recordings, and non-square pixel aspect ratios can alter how downstream players interpret stream flags. Running every calculation and file conversion locally in browser memory ensures your production assets remain private while providing deterministic numbers you can paste directly into terminal automation scripts, NLE export presets, or camera prep checklists.

Frequently Asked Questions

Where should I position burned-in captions so one master file works on TikTok, Reels, and Shorts?

Place the bottom baseline of your burned-in captions between Y = 1320 px and Y = 1420 px on a 1080x1920 timeline (roughly 26% to 31% up from the bottom edge), and keep horizontal text width inside X = 80 px to X = 880 px.

Why do the left and right edges get slightly cropped on some smartphones?

Many modern phones have a 19.5:9 or 20:9 screen aspect ratio rather than true 16:9 (9:16 vertical). When a platform scales a 9:16 video to fill the taller screen height, roughly 35 to 45 pixels on both the left and right edges are cropped off-screen.

Does uploading a screenshot to this previewer send my client frame to a server?

No. Your image is decoded locally via URL.createObjectURL / FileReader and drawn directly onto the HTML5 <canvas> element in your browser tab.