Aspect ratios & safe areas
Also searched as: aspect ratio, 9:16 vertical, 16:9 widescreen, safe areas, responsive video, multi-format
Canonical Definition
Aspect ratio is the proportional relationship between a video frame's width and height (16:9 for landscape, 9:16 for vertical reels, 1:1 for square feeds), defining compositional margins and UI safe zones.
Safe Zones: Keep critical text >15% from top and >28% from bottom in 9:16
A composition built for 16:9 desktop viewing cannot simply be cropped to 9:16 vertical. When cropped, side-by-side layouts lose half their information and subtitles get covered by platform navigation bars.
Parametric video allows developers to author responsive video layouts where containers stack vertically or horizontally based on `width / height` ratios, respecting platform safe zones.
The 9:16 Platform Safe Area Budget
Avoiding TikTok, Instagram, and YouTube Shorts UI overlays
On vertical platforms, the right column holds like/share buttons, the bottom 25% contains username and captions, and the top 12% contains platform navigation. Core graphic action must sit within the central 60% safe box.
How this works: A layout component adapting landscape video footage into an active 9:16 vertical canvas with background blur fill.
- Converts 16:9 source footage into 9:16 feeds without harsh black bars
- Maintains essential typographic action within the vertical safe zone
- Automatic container resizing based on canvas dimensions
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- Test compositions at both 1920x1080 (16:9) and 1080x1920 (9:16) using modular CSS flex-direction switches.
Common Failure Modes (What to avoid)
- Placing lower thirds or captions below 75% height in 9:16: TikTok handle overlays will render them unreadable.
Build aspect ratios & safe areas in Animatiq
Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.
Related motion principles
Word-level captions
Word-level captions are subtitles timed to individual words rather than full phrases, where each word dynamically scales, highlights, or enters at the exact millisecond it is spoken.
Text & IdentityLower third
A lower third is a graphic overlay positioned in the lower portion of the screen that identifies a speaker, location, or subject without obstructing key facial features.
Composition & UIScenes & layouts
Scenes and layouts are structural composition systems — split screens, radial stages, side-by-side comparisons, and responsive frames — that organize multi-element narratives.