You stream in 16:9 and the overlay looks right in OBS. Then you open your own stream on a phone held upright. The counter is a smudge, the ends of the ticker are gone, and the lower third sits under a column of comments. Nothing is broken. The overlay was laid out for a frame the phone is not showing.
There are three separate problems in that picture, and they need different fixes. This post takes them one at a time, then maps where each platform draws over vertical video. Those bands are estimates, for a reason explained below, and you should check them against your own stream.
Problem one: everything shrinks
The first way to put a 16:9 picture into a 9:16 frame is to fit the whole thing. A 1920×1080 frame squeezed to 1080 pixels wide becomes 1080×608. Every element on it is now about 56% of the size it was designed at, and the picture fills less than a third of the frame’s height, with empty bands above and below.
Overlay text is sized for a monitor at arm’s length. A ticker set at 36 pixels becomes about 20 pixels in that frame, and then the phone shows the whole frame a few inches wide. A label that was comfortable on a desktop ends up smaller than the phone’s own interface text. Making the text bigger in your 16:9 layout does not fix it; it only makes the desktop version shout.
Problem two: the corners get cut
The opposite approach is to crop: keep the full height and cut the sides. That is what YouTube does by default. Its help page says plainly that “The vertical stream is a center crop of the horizontal stream.” A 9:16 slice of a 1920×1080 frame is about 608 pixels wide, so roughly the outer two-thirds of the picture is gone.
That outer two-thirds is exactly where overlays live. Counters sit in the top corners, a webcam frame in a bottom corner, a ticker runs edge to edge and loses both ends. A crop keeps the game and throws away your layout.
Twitch Dual Format and YouTube’s encoder mode both avoid the crop by letting you send a separate 9:16 canvas. That fixes the frame. It does not fix the overlay; it gives you an empty 1080×1920 canvas to put one in.
Problem three: the app draws over your video
Even a perfect 9:16 layout has to share the screen. Phone apps draw their own interface on top of vertical live video: the channel name and viewer count at the top, chat or comments and buttons at the bottom, and on TikTok, hearts and gifts up the right side. Twitch says so directly: it “overlays its own interface (chat and controls) on top of the mobile view”, and viewers can tap to show more, less or no chat. Its advice is to keep important visuals in the centre and to skip a chat overlay of your own, since Twitch adds chat itself.
The bottom band costs the most, because the bottom of a 16:9 overlay is where tickers and lower thirds go. Leave them in the same place in 9:16 and they sit under the comments.
Where the bands are, estimated
We could not find a platform that publishes pixel sizes for its live interface on phones. The bands below are Kloot’s defaults, put together from vendor guidance, Twitch’s description of its mobile chat and looking at the apps. TikTok’s published safe zones are for ads, not LIVE, so they are not used here. Treat the numbers as a starting point.
| Platform | Top | Bottom | Right edge |
|---|---|---|---|
| TikTok LIVE | ~12% | ~36% (comments on the left ~70%, then the gift and share bar) | ~12%, from mid-height down |
| Twitch (mobile) | ~10% | ~33% (chat, resizable by the viewer) | none |
| YouTube (vertical feed) | ~10% | ~30% (comments, Super Chat) | ~10% (unverified for live) |
| Anything else | ~8% | ~20% | ~8% |
Estimated bands per platform, as percentages of a 1080×1920 frame. Pick a platform to see where its app draws over the video.
What is left in the middle is the area every viewer actually sees. On TikTok it runs from about 13% to 62% of the frame height, which is less than half the screen. Anything a viewer must read, such as a counter, a poll or a winner’s name, belongs there. Anything that can be covered for a moment, such as a watermark, can sit near an edge.
One more on TikTok: the QR code
There is one thing a 16:9 overlay gets wrong on TikTok that has nothing to do with layout. TikTok’s Community Guidelines list giveaways under “Trade”, along with “directing people off-platform”, which includes posting links. TikTok’s text does not use the words “QR code”, but in our reading a giveaway card with a code that sends viewers to another site is a link by another name.
So Kloot’s TikTok profile hides the giveaway’s QR code and join link and shows a “free entry” card instead. The honest consequence: Kloot doesn’t read TikTok chat, so viewers on TikTok cannot enter from the screen today. The panel says so when you pick the profile.
How to fix it by hand
You can fix all three problems without buying anything. It takes an evening and some upkeep.
- Make the vertical canvas 1080×1920 and add each browser source at that size, at 0,0 with no scaling, so text stays sharp.
- Move tickers and lower thirds up, so they sit above the bottom band rather than on the bottom edge.
- Keep anything a viewer must read in the middle of the frame; give the corners to things that can be covered.
- Size text for a phone, not a monitor. Kloot’s own 9:16 layout aims for body text of at least 44 pixels on a 1080-wide canvas, which is a fair starting point.
- On Twitch’s vertical feed, leave out your own chat box. Twitch already draws chat there.
- Open your stream on your own phone before trusting any layout, including ours.
The catch is upkeep. You now have two layouts, and every change to one has to be made in the other. Stream to TikTok and Twitch from the same vertical canvas and the bands differ, so one layout is always a compromise.
It has limits worth knowing. The layout is a rule, not a designer, so if you want a tool in a specific spot on the phone, that is the Pro option; hiding a tool in 9:16 only is free. Kloot can’t take a separate 9:16 image for a screen, cover or border yet. Landscape art is letterboxed on the tool’s background colour rather than cropped.