3-7. 비디오 종횡비
■ 비디오 종횡비(aspect ratio)
부트스트랩에서는 비디오나 슬라이드 쇼에 사용할 수 있는 종횡비를 설정할 수 있는 다음과 같은 클래스를 제공합니다.
- .ratio-1x1 : 종횡비 1:1
- .ratio-4x3 : 종횡비 4:3
- .ratio-16x9 : 종횡비 16:9
- .ratio-21x9 : 종횡비 21:9
비디오 종횡비(aspect ratio) 사용 예
ex3-12.html
<div class="container mt-3">
<h3>비디오 종횡비</h3>
<div class="w-25 float-start ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/KEkNSpJaCDY?si=kf-Ou4W53bbr5hnI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></iframe>
</div>
<div class="w-25 float-start ratio ms-5 ratio-4x3">
<iframe src="https://www.youtube.com/embed/KEkNSpJaCDY?si=kf-Ou4W53bbr5hnI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></iframe>
</div>
</div>
ex3-12.html의 실행 결과
