응답 성있는 삽입

또한 모든 장치에서 비디오 또는 슬라이드 쇼를 올바르게 확장 할 수 있습니다.

클래스는 <iframe>, <embed>, <video> 및 <object> 요소에 직접 적용 할 수 있습니다.

다음 예제에서는 .embed-responsive-item클래스에 <iframe>태그 를 추가하여 반응 형 동영상을 만듭니다 (동영상은 부모 요소에 맞게 확장됩니다). 포함하는 항목 <div>은 동영상의 종횡비 를 정의합니다.

예
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

종횡비 란 무엇입니까?

이미지의 종횡비는 폭과 높이 사이의 비례 관계를 나타냅니다. 일반적인 비디오 가로 세로 비율은 4 : 3 (20 세기의 범용 비디오 형식)과 16 : 9 (HD TV 및 유럽 디지털 TV의 범용)입니다.

두 종횡비 클래스 중에서 선택할 수 있습니다.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>