Website not appearing properly on certain phones?

Hello. I have a video set as the banner on my website. It looks great on my iPhone 12 and other older iPhones, but on iPhone 13 or above the text starts to get cut off.

https://www.spectrumdesigns.org/

Is there a way to make two different versions of the mobile site so it can appear correctly for everyone? Or is there a way to make it look nice on newer iPhones without messing it up for older devices?

Thank you.

The text on the video seems to get cut off on all devices other than mobile. 

If you want the video to maintain an aspect ratio, you could try this solution:

https://www.will-myers.com/articles/prevent-background-images-from-cropping-in-squarespace-71

@ZiggyI see that as well in the preview, but it works fine on every PC and Mac I've tried it on when it's live.

I'm trying to experiment with the code, so far it hasn't worked.