HTML5 Video dimensions in Safari IOS

Question

I\'m building a website for a client who\'s majority of content is video. I\'m using the HTML5 video element to display the content but have problems when it comes to Safari

Answer 1

The solution for iOS can be achieved with pure CSS. This works for that occupies the width of the viewport, which is common in mobile.

1. Based on viewport units

1vw = 1% of viewport width

2. Get the width percentage computation based on aspect ratio

If your video is 16:9

9 divided by 16 = 0.5625 = 56.25% = 56.25vw

If your video is 4:3 and 21:9 that would be 0.75 and 0.4285 respectively.

3. Apply these CSS rules

    video {
        width: 100% !important;
        height: 100% !important;
        max-height: 56.25vw !important;
    }

The misbehaving iOS would be forced by the max-height to not grow taller than the ratio based on the width.