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
코드 복사
고정 너비 아래의 유연성
동영상 너비가 제한되어 있으면 추가
컨테이너가 필요합니다. 비디오를 만들고 div의 고정 너비와 max-width:100%를 설정합니다.
CSS
코드 복사
HTML
코드 복사
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31