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

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