CODEWITHSUNDEEP
ioshtmlipadvideo
FunnyOxymoron
FunnyOxymoron

Reputation: 615

HTML5 Video dimensions in Safari IOS

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?

Upvotes: 6

Views: 17511

Answers (5)

JNAK
JNAK

Reputation: 291

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.

Upvotes: 1

Guy
Guy

Reputation: 3096

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

Upvotes: 6

Dan Dumitrache
Dan Dumitrache

Reputation: 1

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

Upvotes: -3

Shae Kuronen
Shae Kuronen

Reputation: 141

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

Upvotes: -1

Ian Devlin
Ian Devlin

Reputation: 18870

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.

Upvotes: 0

Related Questions