CSS를 사용하여 탄력적인 비디오 구현 html5 사례 practice_html5 튜토리얼 기술

Elemin 테마(최근 디자인한 반응형 사이트)를 코딩할 때, 삽입된 동영상의 크기 변경을 보다 유연하게 만드는 방법에 대해 프레임 건너뛰기가 발생했습니다. max-width:100% 및 height:auto를 사용하면 HTML5 비디오 태그가 제대로 작동할 수 있지만 이 솔루션은 iframe 또는 개체 태그 인라인 코드에서는 작동하지 않습니다. 몇 시간 동안 검색하고 실험한 끝에 마침내 해결책을 찾았습니다. 이 CSS 트릭은 반응형 디자인을 수행할 때 유용합니다.

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

코드 복사

코드는 다음과 같습니다.

동영상 {
max -width: 100%;
height: auto;
}

Flexible Object & Iframe Embedded Video
이 트릭은 매우 간단합니다.

컨테이너를 추가하고 div의 padding-bottom 속성 값을 50%에서 60% 사이로 설정합니다. 그런 다음 하위 요소(ifame 또는 객체)의 너비와 높이를 100%로 설정하고 절대 위치 지정을 사용합니다. 이렇게 하면 포함된 개체가 자동으로 최대 크기로 확장됩니다.
CSS

코드 복사

코드는 다음과 같습니다.

.video-container {
위치: 상대;
패딩 하단: 56.25%;
패딩 상단:
높이: 0; 🎜>}
.video-container iframe,
.video-container 객체,
.video-container embed {
위치: 절대
위: 0
왼쪽: 0; ;
너비: 100%;
높이: 100%;
}

HTML


코드 복사

코드는 다음과 같습니다.

src="http:// player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" ​​​​frameborder="0"> 🎜>

고정 너비 아래의 유연성

동영상 너비가 제한되어 있으면 추가

컨테이너가 필요합니다. 비디오를 만들고 div의 고정 너비와 max-width:100%를 설정합니다.
CSS

코드 복사

코드는 다음과 같습니다.

.video -wrapper { 너비: 600px; 최대 너비:

}

HTML

코드 복사

코드는 다음과 같습니다.

-컨테이너">