TikTok safe zones for captions, beside Reels and YouTube

All three zones come from the platforms' ad guides. Meta gives percentages; the pixels above are those percentages of 1080x1920.

1. 1

   Measure TikTok's zone from its template

   TikTok's in-feed ads help page offers the safe zone as a zip of PNG overlays. The in-feed one is 2880x5120: coloured where the app draws its UI, transparent where your video shows. This script counts only fully transparent pixels and scales them to 1080x1920.

   import io
   import urllib.request
   import zipfile
   import numpy as np
   from PIL import Image
   
   TEMPLATE = "https://lf-tt4b.tiktokcdn.com/obj/i18nblog/tt4b_cms/en-US/5jqet0ab9qci-10e7f5Vig4uhAscNP8XPB0.zip"
   
   archive = zipfile.ZipFile(io.BytesIO(urllib.request.urlopen(TEMPLATE).read()))
   alpha = np.array(Image.open(archive.open("In-Feed/Feed.png")).convert("RGBA"))[:, :, 3]
   height, width = alpha.shape
   scale = 1920 / height
   print(f"template {width}x{height}, scaled to 1080x1920 below")
   
   # Fully transparent pixels are the safe area; the coloured overlay marks app UI
   clear = alpha == 0
   rows = np.where(clear.sum(axis=1) > width // 4)[0]
   top, bottom = rows[0], rows[-1] + 1
   print(f"top band: {top * scale:.0f} px, bottom band: {(height - bottom) * scale:.0f} px")
   
   # Walk down the safe area; short runs are the template's own labels, so we skip them
   runs = []
   for y in range(top, bottom):
       xs = np.where(clear[y])[0]
       edges = (xs[0], xs[-1] + 1)
       if runs and runs[-1][2] == edges:
           runs[-1][1] = y + 1
       else:
           runs.append([y, y + 1, edges])
   bands = []
   for start, end, edges in (r for r in runs if r[1] - r[0] >= 40):
       if bands and bands[-1][2] == edges:
           bands[-1][1] = end
       else:
           bands.append([start, end, edges])
   for start, end, (left, right) in bands:
       print(f"y {start * scale:.0f}-{end * scale:.0f}: safe x {left * scale:.0f}-{right * scale:.0f}, "
             f"left band {left * scale:.0f} px, right band {(width - right) * scale:.0f} px")
   
   # $ python3 tiktok_zone.py
   # template 2880x5120, scaled to 1080x1920 below
   # top band: 240 px, bottom band: 660 px
   # y 240-840: safe x 120-960, left band 120 px, right band 120 px
   # y 840-1260: safe x 120-780, left band 120 px, right band 300 px
   

2. 2

   Download a clip with and without captions

   To find where captions land, you need the same moment twice: once with burned-in captions and once clean. These are 4 renders of one clip plus the clean clip's SRT.

   for preset in bold:job_u21i20xzutohjd7s9ybd karaoke:job_4bklcp7t3u6bp21g5200 minimal:job_v7hv0qugdyl4ipqbftde none:job_dlbgy9meopo2hagbiojl; do
     curl -so ${preset%%:*}.mp4 https://api.clipsdk.com/f/out/${preset##*:}/clip-1.mp4
   done
   curl -so none.srt https://api.clipsdk.com/f/out/job_dlbgy9meopo2hagbiojl/clip-1.srt
   

3. 3

   Find the caption box in every frame

   The two renders differ only where a caption was drawn, so a pixel diff 4 times a second gives the caption's box in each frame. The script then checks every box against all three zones.

   import subprocess
   import sys
   import numpy as np
   
   W, H = 1080, 1920
   
   # Safe areas as (left, top, right, bottom); TikTok's is an L, so it takes two boxes
   SAFE = {
       "TikTok": [(120, 240, 960, 840), (120, 240, 780, 1260)],
       "Reels": [(65, 269, 1015, 1248)],
       "YouTube": [(48, 288, 888, 1248)],
   }
   
   def frames(path):
       raw = subprocess.run(["ffmpeg", "-v", "error", "-i", path, "-vf", "fps=4", "-f", "rawvideo", "-pix_fmt", "gray", "-"],
                            capture_output=True, check=True).stdout
       return np.frombuffer(raw, np.uint8).reshape(-1, H, W).astype(np.int16)
   
   def inside(box, area):
       return area[0] <= box[0] and area[1] <= box[1] and box[2] <= area[2] and box[3] <= area[3]
   
   captioned, clean = frames(sys.argv[1]), frames(sys.argv[2])
   
   # The two renders differ only where a caption was drawn
   boxes = []
   for a, b in zip(captioned, clean):
       changed = np.abs(a - b) > 64
       rows = np.where(changed.sum(axis=1) > 8)[0]
       cols = np.where(changed.sum(axis=0) > 8)[0]
       if len(rows):
           boxes.append((cols[0], rows[0], cols[-1], rows[-1]))
   
   left, top = min(b[0] for b in boxes), min(b[1] for b in boxes)
   right, bottom = max(b[2] for b in boxes), max(b[3] for b in boxes)
   print(f"{sys.argv[1]}: caption in {len(boxes)} frames, x {left}-{right}, y {top}-{bottom}")
   for name, areas in SAFE.items():
       outside = sum(not any(inside(box, area) for area in areas) for box in boxes)
       print(f"  {name}: outside the safe zone in {outside} of {len(boxes)} frames")
   
   # $ for preset in bold karaoke minimal; do python3 caption_box.py $preset.mp4 none.mp4; done
   # bold.mp4: caption in 86 frames, x 134-753, y 872-1049
   #   TikTok: outside the safe zone in 0 of 86 frames
   #   Reels: outside the safe zone in 0 of 86 frames
   #   YouTube: outside the safe zone in 0 of 86 frames
   # karaoke.mp4: caption in 86 frames, x 124-772, y 1014-1221
   #   TikTok: outside the safe zone in 0 of 86 frames
   #   Reels: outside the safe zone in 0 of 86 frames
   #   YouTube: outside the safe zone in 0 of 86 frames
   # minimal.mp4: caption in 86 frames, x 147-748, y 1080-1241
   #   TikTok: outside the safe zone in 0 of 86 frames
   #   Reels: outside the safe zone in 0 of 86 frames
   #   YouTube: outside the safe zone in 0 of 86 frames
   

4. 4

   Burn the SRT inside all three zones

   Put the captions where every app leaves the frame clear: bottom edge at y 1248, x 120 to 780, with 12 px spare for the outline. The same check then finds the caption outside a zone in 0 of 86 frames.

   import re
   import subprocess
   
   # The area all three apps leave clear at 1080x1920, less room for the outline
   LEFT, RIGHT, BOTTOM, INSET = 120, 780, 1248, 12
   
   def ass_time(srt_time):
       h, m, s = srt_time.replace(",", ".").split(":")
       return f"{int(h)}:{m}:{float(s):05.2f}"
   
   cues = re.findall(r"(\d+:\d+:\d+,\d+) --> (\d+:\d+:\d+,\d+)\n(.+?)(?:\n\n|\Z)", open("none.srt").read(), re.S)
   events = [f"Dialogue: 0,{ass_time(a)},{ass_time(b)},Caption,,0,0,0,,{' '.join(text.split())}" for a, b, text in cues]
   
   open("safe.ass", "w").write("\n".join([
       "[Script Info]", "PlayResX: 1080", "PlayResY: 1920", "WrapStyle: 0", "",
       "[V4+ Styles]",
       "Format: Name, Fontname, Fontsize, PrimaryColour, OutlineColour, Bold, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV",
       f"Style: Caption,DejaVu Sans,56,&H00FFFFFF,&H00000000,1,1,5,0,2,{LEFT + INSET},{1080 - RIGHT + INSET},{1920 - BOTTOM + INSET}", "",
       "[Events]", "Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text",
       *events,
   ]))
   
   # Burn them into the clean clip
   subprocess.run(["ffmpeg", "-v", "error", "-y", "-i", "none.mp4", "-vf", "ass=safe.ass",
                   "-c:v", "libx264", "-crf", "18", "-c:a", "copy", "safe.mp4"], check=True)
   print(f"{len(events)} captions inside x {LEFT}-{RIGHT}, above y {BOTTOM}: safe.mp4")
   
   # $ python3 burn_srt.py && python3 caption_box.py safe.mp4 none.mp4
   # 5 captions inside x 120-780, above y 1248: safe.mp4
   # safe.mp4: caption in 86 frames, x 145-750, y 1071-1239
   #   TikTok: outside the safe zone in 0 of 86 frames
   #   Reels: outside the safe zone in 0 of 86 frames
   #   YouTube: outside the safe zone in 0 of 86 frames