Geek asks and answers

HTML5 video sizes in Safari iOS

I am creating a website for a client whose majority of the content is video. I use the HTML5 video element to display content, but have problems when it comes to Safari on iOS.

Safari on iOS does not download the video metadata until the user starts downloading, so the width and height properties of the video are set to the default size of 300 x 150 pixels, leaving a large area of ​​black on both sides of the video, stretching the width of my containing element.

I try to make the site as responsive as possible, and therefore this default size does not work for me. Is there anyway a fight against this so that Safari on iOS respects the size of the video?

+5
source share
4 answers

CSS, . iPad mini iOS 7.1

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

CSS 100% .

JavaScript, , , :

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

, .

0

width:100%, height:0, padding-bottom:56.25% ( 16: 9),

height/width height/width :

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

, , css / ...

0

css , .

-1

More articles:


All Articles