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

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

Try using width:100%, height:0, padding-bottom:56.25% (for 16:9 video) to set the size of the container element

Then get the container height/width to set the height/width of video element:

var the_case_study_video_wrapper = $('#tw-case-study-hero-video-wrapper'),
    the_case_study_video = document.getElementById('tw-case-study-hero-video'),
    the_height = $(the_case_study_video_wrapper).css('padding-bottom'),
    the_width = $(the_case_study_video_wrapper).css('width');

$(the_case_study_video).css({
   'height': the_height,
   'width': the_width
});

And then maybe set the css again on orientation resize and/or browser resize...

Answer 3

Via CSS, try giving it a width of 100% and a height of auto.

EDIT In this case you need to use JavaScript to wait until the video has loaded the metadata and then read and set the width and height, for example:

var v = document.getElementById('myVideo');
v.addEventListener('loadedmetadata', function(e) {
   this.width = this.videoWidth;
   this.height = this.videoHeight;
}, false);

I haven't exactly tested this but it should lead you on the right track.

Answer 4

I just set a fix width and height in css rule for video tag and safari displays the video properly.

Answer 5

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.