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 on iOS.

Safari on iOS does not download the video metadata until the user initiates the download, so the width and height properties of the video are set to a default size of 300 x 150 px - leaving a big area of black on either side of the video stretching the width of my containing element.

I'm trying to make the website as responsive as possible and so this default size does not work for me. Is there anyway to combat this so that Safari on iOS respects the video size?

Answer 1

I used the following CSS that worked for me. Tested on iPad mini with iOS 7.1

video {
 min-height: 100%; 
 min-width: 100%; 
 height: auto !important;
 width: auto !important; 
}

Answer 2

The solution for iOS can be achieved with pure CSS. This works for <video> 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;
    }

<video>
    <source src="video.mp4" type="video/mp4">
</video>

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