HTML5 사파리의 동영상 크기 IOS

Question

대다수의 콘텐츠가 동영상 인 클라이언트 용 웹 사이트를 구축 중입니다. 콘텐츠를 표시하는 데 HTML5 동영상 요소를 사용하고 있지만 iOS의 Safari에는 문제가 있습니다.

iOS의 Safari는 사용자가 다운로드를 시작할 때까지 비디오 메타 데이터를 다운로드하지 않으므로 비디오의 너비 및 높이 속성이 기본 크기 인 300 x 150 픽셀로 설정되어 양쪽에 큰 검은 색 영역이 남습니다 내 포함하는 요소의 너비를 늘리는 비디오

나는 가능한 한 반응이 빠른 웹 사이트를 만들기 위해 노력하고 있으므로이 기본 크기는 나를 위해 작동하지 않습니다. 어쨌든 iOS의 Safari가 동영상 크기를 존중하도록이 문제를 해결할 수 있습니까?

Answer 1

CSS를 통해 너비가 100 %이고 높이가 자동이되도록하십시오.

당신은 예를 들어 폭과 높이, 비디오 메타 데이터를로드 할 때까지 기다린 후 읽기 및 설정 자바 스크립트를 사용해야이 경우 편집 :

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

나는 천국을 ' 정확히 이것을 테스트했지만 올바른 방향으로 인도해야합니다.

Answer 2

하면 padding-bottom:56.25%이 (16 : 9 화상) width:100%, height:0를 사용하여 시도 용기 요소의 크기를 설정

이어서 용기 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를 다시 설정할 수 있습니다.

Answer 3

비디오 태그에 CSS 규칙에서 너비와 높이를 고정시키고 비디오를 표시합니다. o 제대로.

Answer 4

다음 CSS를 사용했습니다. 아이폰 OS 7.1

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