Twitter Cropping Vertical Video

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.

Devices that Crop

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 isntance 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.

What to do? - 1105 x 1920

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.

Final Thoughts

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.

Tips

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!

Edit on Github

Syntax Podcast

Hold on — I'm grabbin' the last one.

Listen Now →
Syntax Podcast

@wesbos Instant Grams

Master Gatsby

Master Gatsby

Building modern websites is tough. Preloading, routing, compression, critical CSS, caching, scaling and bundlers all make for blazing fast websites, but extra development and tooling get in the way.

Gatsby is a React.js framework that does it all for you. This course will teach you how to build your websites and let Gatsby take care of all the Hard Stuff™.

MasterGatsby.com
I post videos on and code on

Wes Bos © 1999 — 2022

Terms × Privacy Policy