The thumbnail safe zone: what YouTube draws on top of your design

What gets drawn over your image

The one that matters most is the video duration badge: a dark rounded rectangle with white text, sitting in the bottom-right corner of the thumbnail on virtually every surface where videos are listed. It is small, but it is opaque and it is always there.

The second is the progress bar. Once a viewer has partially watched a video, a red bar appears along the bottom edge of the thumbnail showing how far they got. It is thin, but it sits on top of your bottom few per cent.

Beyond those, the surrounding interface crops in at the edges on some surfaces, and hover previews can replace the still entirely on desktop.

The practical rule: the central ninety per cent

The simplest reliable habit is to keep every element that carries meaning — text, faces, product, logo — inside the central 90 % of the frame. That leaves a 5 % margin on all four sides absorbing the badge, the bar and any edge cropping.

This is not a YouTube specification, it is a design habit borrowed from broadcast title-safe areas, and it works for the same reason: it costs you almost nothing and it removes an entire category of failure.

The bottom-right corner deserves special treatment

If you follow the composition that dominates the platform — big text on one side, a cut-out person on the other — the person's shoulder or hand very often lands exactly where the duration badge goes. It rarely ruins the thumbnail, because a shoulder can take a small box on it.

What does ruin it is putting the last word of your headline there, or the punchline emoji, or the price in a review thumbnail. Anything whose absence changes the meaning must not go in that corner.

The safe zone is not identical on every surface

The duration badge and the bottom edge are the constants. Everything else shifts with the surface, and each one takes a slightly different bite out of your design.

On the phone home feed the thumbnail runs close to the full width of the screen. It is the largest and most forgiving surface most of your viewers will see, and it is also where the badge is at its most obvious, because everything on it is large. Search results depend on the device: on a phone they behave much like the feed, while on a desktop the thumbnail sits to the left with the title, channel and description beside it, at a moderate size.

The watch-page sidebar is the demanding one. Suggested videos sit in a narrow column, around 168 pixels wide, alongside two lines of title text competing for the same attention. Anything that already needed a second glance at feed size has gone by the time it reaches this column.

Embedded players on other people's sites work differently again. There is no surrounding list interface, but a play button sits over the middle of the frame, the player's own controls appear along the bottom, and if the container on that page is not exactly 16:9 the image is fitted or cropped to fill it. End screens and autoplay suggestions render the thumbnail small, inside the video frame itself, often with rounded corners. Rounded corners appear on several surfaces now, and each one quietly removes a small triangle from your image. It is not much space, but it is exactly where people like to tuck a logo.

Designing so the meaning survives every crop

The way to handle all of that without keeping five layouts in your head is to rank your elements before you start. One element is primary: the thing that has to arrive at sidebar size, blurred, with a badge on top of it. Everything else is secondary, and secondary means you have decided in advance that losing it is acceptable.

Place the primary element along the horizontal axis of the frame, roughly a third of the way in, clear of all four edges and clear of the bottom-right corner. Not dead centre either, because that is where an embedded player draws its play button. Faces are the usual primary element, and a face wants to be whole: a face cropped by the frame edge on one surface and by the badge on another stops being a face and starts being a shape.

Give text room at the end of the line. A headline that finishes flush against the safe margin looks tight the moment a surface crops in slightly, whereas one that stops a character's width inside the margin reads as deliberate. Two or three words at a size that fills a good part of the height will survive every surface; five words at whatever size makes them all fit will survive none of them.

Then test instead of trusting. Look at the design at feed size, at sidebar size, and with the badge and the margin drawn over it, asking the same question each time: is the primary element still doing its job? If the answer changes between one size and the next, the layout is leaning on detail that only exists at the larger one.

Check it, do not estimate it

It is hard to hold the exact position of the badge in your head while you design. The reliable method is to overlay it: draw the safe margin and a mock duration badge on top of your design while you work, and move things until nothing important is underneath.

This tool has that overlay built in — the safe zone toggle draws the 90 % margin, a mock badge and the progress bar directly on the canvas. Turn it on before you export, not after.

The same idea applies elsewhere

Podcast apps overlay play buttons and download indicators on cover art. Instagram crops the feed image differently from the grid. TikTok covers put the caption and interface over the lower portion of the frame.

The general principle survives every platform change: assume the outer edge of your image belongs to the platform, and build the meaning into the middle.