HTML / CSS
[CSS, HTML] 반응형에서 유투브 동영상 비율 유지하여 삽입하기
- 2022.04.17 13:05:00
 반응형웹인 경우 iframe 방식의 유투브 동영상을 삽입하는 했을 때 디바이스 폭(width)에 따라 높이(height)가 계산되어 출력해주는 소스코드 예제. 부모 엘리먼트를 하나 만들고 그 내부에 유투브 iframe 을 넣는 방식인데, 부모의 높이를 padding-bottom '%'로 계산하여 비율을 맞춰주게 된다. 예제는 아래와 같다. [!]CSS[/!] .respondFrame { position: relative; padding-bottom: 56.25%; /* 16:9 비율인 경우. 4:3 비율인 경우 75%로 설정합니다 */ overflow: hidden; }
.respondFrame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } [!]HTML[/!] <div class="respondFrame">
<iframe src="https://www.youtube.com/embed/vAO_OcRz6xQ" frameborder="0" allowfullscreen></iframe> </div> |