HTML5 Video dimensions in Safari IOS

13,372

Solution 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; 
}

Solution 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

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

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

Share:
13,372
FunnyOxymoron
Author by

FunnyOxymoron

Web Designer and Keen learner of JavaScript

Updated on June 11, 2022

Comments

  • FunnyOxymoron
    FunnyOxymoron over 1 year

    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?

  • FunnyOxymoron
    FunnyOxymoron over 10 years
    This does not work, like I say, the video metadata is not downloaded, so although the video 'space' will stretch 100% to fit the containing element width, the video itself shrinks to 300 x 150 px. You can overwrite the default iOS video size by specifying a definite height and width, but since the website aims to be responsive this is not an option.
  • FunnyOxymoron
    FunnyOxymoron over 10 years
    Unfortunately this is still not the answer. The video metadata is not loaded until the user explicitly initiates the download, so until that point the JS will not fire and the video remains in the iOS default dimensions.
  • Ian Devlin
    Ian Devlin over 10 years
    Then I suggest you decide on a common set of dimensions and use that, then changing it to fit the video in question once it loads. What you realls need is CSS3 object-fit which isn't very well supported but there is a polyfill: steveworkman.com/html5-2/javascript/2012/…
  • FunnyOxymoron
    FunnyOxymoron over 10 years
    Thanks, I think you're right about choosing a set of dimensions. It seems the only real work-around for this case.
  • MarkLunney
    MarkLunney over 9 years
    This did the trick for me, neater solution than hardcoding values. For my use it was "width: 100% !important;" though.
  • Joel Karunungan
    Joel Karunungan over 3 years
    Will not work on small screens like mobile. The height will default to iOS minimum height for video.
  • Joel Karunungan
    Joel Karunungan about 3 years
    @KirillTolkachev you are most welcome :) Glad to have helped!