When you make a vertical TikTok video, interface elements such as the like and share buttons, captions, and progress bar cover parts of the picture. A safe zone is the area where you place important text and visuals so those controls do not hide them.
Keep key content near the center of the frame, away from the right edge and the bottom. TikTok’s interface and caption length affect the available space, so no single pixel guide works for every post. To make narrated explainer videos in a tall format that leaves room for TikTok’s interface, use explainroo. It creates TikTok-sized videos and keeps text clear of areas where apps place buttons.
Where TikTok’s interface covers the video
Engagement controls cover the right side of the screen. Captions and the progress bar can cover the lower area. Long captions and changes to the interface take up more room. Leave extra space at the bottom when you expect a long caption. A TikTok safe-zone overview recommends centering important creative elements and avoiding the bottom 20%.
Leave space at the top because interface elements or a device notch can intrude there. Treat the center of the frame as your main content area, keep the right edge clear, and avoid placing essential information near the top or bottom. These practical placement rules do not guarantee that every part of the frame will remain unobstructed.
Where to put text and faces
Put a headline, product, or main subject in the central area, with a little room around it. Keep text away from the right-side controls and bottom caption area. If the video includes subtitles, position them around the middle or slightly below it, while making sure they do not compete with a face or other key detail. Auto-generated captions can appear even when you have not added your own, so check the posted version for overlapping text.
For a person speaking to camera, frame the face near the center or slightly left of center. This keeps it clear of the right-side buttons and leaves room below for captions. Keep the eyes and expression visible, and avoid cropping the face against the top edge. These face-placement suggestions apply the same central-area rule used for other key visuals.
Why pixel guides disagree
Published guides give different pixel margins. For example, Ignite Social Media’s recommendations leave 108 pixels at the top and 320 at the bottom for standard vertical creative, while another safe-zone guide recommends 160 pixels at the top and 480 at the bottom. Use those figures as starting points, since they are not universal TikTok dimensions.
The interface on screen varies with caption length, ad format, and app layout. A design intended for TikTok may also run into different overlays on another platform. Check the video in TikTok’s current preview or live interface, especially when a long caption or interactive feature takes up extra space. FrameNotion’s guidance also recommends checking the finished creative in the app because interface placement can vary.
Make a TikTok-safe explainer with explainroo
explainroo is a free, open-source kit that works with coding agents to create narrated explainer videos and product demos. It creates tall videos for TikTok, YouTube Shorts, and Instagram Reels, and keeps text clear of areas where those apps place buttons. To use it:
-
Open a coding agent that can run shell commands, such as Claude Code, Codex, Pi, OpenCode, or Gemini CLI. explainroo works best with Claude Code.
-
Paste this prompt, replacing the bracketed words with your topic:
Make me a short explainer video about [your topic]. Use explainroo for it: clone https://github.com/vincentsch/explainroo, read its AGENTS.md and follow the steps. -
Ask the agent to keep the headline and important visuals in the central area, clear of the right-side controls and lower caption area. The agent creates a script and scene layouts, then explainroo renders the video and provides an MP4.
-
Review the scene stills and layout check. explainroo flags text that is cut off or overlapping; the agent cannot watch the finished video, so check the MP4 in TikTok’s interface as well.
The kit makes narrated graphics and product demos; it does not edit existing camera footage or create talking avatars. The coding agent is a separate service and may have its own costs.
