CSS를 사용한 유연한 비디오를 위한 HTML5 연습 코드 공유

Elemin 테마(최근 디자인한 반응형 사이트)를 코딩할 때 프레임 건너뛰기 문제는 삽입된 동영상의 크기 변경을 더 유연하게 만드는 방법이었습니다. max-width:100% 및 height:auto를 사용하면 html5의 비디오 태그가 잘 작동하지만 이 솔루션은 object 태그의 iframe 또는 인라인 코드에서는 작동하지 않습니다. 몇 시간 동안 검색하고 실험한 끝에 마침내 해결책을 찾았습니다. 이 CSS 트릭은 반응형 디자인을 수행할 때 유용합니다. 최종 데모 주소를 방문하여 브라우저를 확대하여 효과를 확인할 수 있습니다.

유연한 html5 비디오 태그(데모)

html5 비디오를 사용하면 max-width: 100%를 설정하여 유연하게 만들 수 있습니다. 이전 소개에서 일반적으로 사용되는 iframe 및 객체에 삽입된 코드에는 적합하지 않다고 언급했습니다.

video {
    max-width: 100%;
    height: auto;
}

　 유연한 개체 & Iframe 내장 동영상

이 기술은 매우 간단합니다. 동영상에

p- 하단속성 값은 50%~60% 사이로 설정됩니다. 그런 다음 하위 요소(ifame 또는 개체)의 너비와 높이를 100%로 설정하고 절대 위치 지정을 사용하세요. 이렇게 하면 포함된 개체가 자동으로 최대 크기로 확장됩니다.

　CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

　HTML

<p class="video-container">
    <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe></p>

 고정 너비의 유연성

제한된 경우 너비 비디오를 래핑하려면 추가

컨테이너가 필요하며 p에 대해 고정 너비와 최대 너비:100%를 설정해야 합니다.

　CSS

.video-wrapper {
    width: 600px;
    max-width: 100%;
}

　HTML

<p class="video-wrapper">
    <p class="video-container">
        <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
    </p>
    <!-- /video --></p><!-- /video-wrapper -->

　호환성

이 기술은 모든 브라우저를 지원하며 다음을 포함합니다. Chrome , Safari, Firefox, Internet Explorer, Opera, iPhone 및 iPad.

위 내용은 CSS를 사용한 유연한 비디오를 위한 HTML5 연습 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!