TLDR:
I've been doing a bunch of vertical video lately for TikTok, Twitter, YouTube Shorts, Instagram Reels, and even LinkedIn.
Vertical video is typically 1080 x 1920.
Inside of that, there is a "safe zone" - the area where its safe to put things like text that wont be cut off.
I've been keeping to 45px gutter on the left + right, which has worked so far.
Recently I received a few reports of my code being cut off on Twitter mobile apps - very frustrating.
To figure out which devices were cropping it, and how much I sent this tweet out:
https://twitter.com/wesbos/status/1592266192156524544
100 Replies later, I've narrowed it down to this.
It seems it's just iPhones, and the ones that do crop, all crop the same.
There were many instances where the same phone cropped and didn't.
~98 px from the left and right.
~190px from the bottom
0px from the top
iPhone XR
iPhone XS Max
iPhone 11
iPhone 11 Pro Max
iPhone 12 Mini
iPhone 12
iPhone 12 Pro
iPhone 13 Pro
iPhone 13 Mini
Almost every phone on this list had at least one instance of not cropping. So this is clearly an issue with Twitter.
There was only one instance of it cropping the sides, but not the bottom.
Since the video on Twitter doesn't have to be 1080 x 1920, I thought about adding some width to the video, to see if that would stop it from cropping.
Adding height made it worse.
After a few tests, I found that adding 25px to each side tricked whatever aspect ratio twitter was looking for into showing the entire video.
I tried a bunch of sizes, and the lowest width I could find was 1105, where as 1100 was cropped.
I tried uploading the same 1105x1920 to TikTok, and that seems to show the entire video as well, but then you lose the "full screen" feel.
So now I need to decide if I will export two copies of my video - one for Twitter, and one for everything else.
Ill leave this area open to Pull Requests from anyone who has sizing tips for these videos
Find an issue with this post? Think you could clarify, update or add something?
All my posts are available to edit on Github. Any fix, little or small, is appreciated!