댓글 : Elemin 테마 (최근에 디자인 한 응답 사이트)를 인코딩했을 때, 내가 겪은 프레임 건너 뛰기 중 하나는 내장 비디오를보다 유연하게 만드는 방법이었습니다. 몇 시간 동안 데이터 및 실험을 검색하면서 마침내 솔루션을 찾았습니다.
Elemin 테마 (최근에 디자인 한 응답 사이트)를 인코딩했을 때, 내가 겪은 프레임 스키프 중 하나는 내장 비디오를보다 유연하게 만드는 방법이었습니다. Max-Width : 100% 및 높이 사용 : Auto는 HTML5 비디오 태그를 잘 작동시킬 수 있지만이 솔루션은 iframe 또는 객체 태그의 인라인 코드에서는 작동하지 않습니다. 몇 시간 동안 데이터와 실험을 검색 한 후 마침내 해결책을 찾았습니다. 이 CSS 기술은 반응 형 디자인을 할 때 유용합니다.
유연한 HTML5 비디오 태그
HTML5의 비디오를 사용하면 Max width : 100%를 설정하여 유연하게 만들 수 있습니다. 이전 소개에서, 객체에서 일반적으로 사용되는 iframes 및 내장 코드에는 적용 할 수 없다고 언급되었습니다.
동영상 {
최대 전역 : 100%;
높이 : 자동;
}
Flexible Object & Iframe 내장 비디오
이 트릭은 매우 간단합니다. 비디오에 <Div> 컨테이너를 추가하고 DIV의 패딩 버트 속성 값을 50%에서 60% 사이로 설정해야합니다. 그런 다음 하위 요소 (IFAME 또는 객체)의 너비와 높이를 100%로 설정하고 절대 포지셔닝을 사용하십시오. 이렇게하면 내장 된 물체가 자동으로 최대로 확장됩니다.
CSS
.Video-Container {
위치 : 상대;
패딩-바닥 : 56.25%;
패딩 탑 : 30px;
높이 : 0;
오버플로 : 숨겨진;
}
.Video-Container Iframe,
.Video-container 객체,
.Video-Container Imbed {
위치 : 절대;
상단 : 0;
왼쪽 : 0;
너비 : 100%;
높이 : 100%;
}
HTML
<div>
<iframe src = "http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0"frameborder = "0"> </iframe>
</div>
고정 너비에서 유연성을 달성합니다
비디오 너비가 제한되면 비디오를 감싸고 고정 너비와 최대 폭을 설정하려면 추가 <div> 컨테이너가 필요합니다.
CSS
.Video-Wrapper {
너비 : 600px;
최대 전역 : 100%;
}
HTML
<div>
<div>
<iframe src = "http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0"frameborder = "0"> </iframe>
</div>
<!- /video->
</div>
<!- /video-wrapper->
호환성
이 트릭은 Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone 및 iPad를 포함한 모든 브라우저를 지원합니다.