Source

임베드

모든 장치에서 확장되는 고유 비율을 생성하여 부모의 너비를 기반으로 반응형 비디오 또는 슬라이드쇼 포함을 생성합니다.

에 대한

<iframe>규칙은 , <embed>, <video>및 <object>요소 에 직접 적용됩니다 . .embed-responsive-item다른 속성의 스타일을 일치시키려면 선택적으로 명시적 하위 클래스 를 사용하십시오.

프로 팁! 우리가 당신을 위해 그것을 재정의하므로 당신의 s frameborder="0"에 포함할 필요가 없습니다 .<iframe>

예시

및 종횡비 <iframe>를 사용하여 부모 요소와 같은 임베드를 래핑합니다 . .embed-responsive꼭 필요한 .embed-responsive-item것은 아니지만 권장합니다.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

종횡비

종횡비는 수정자 클래스로 사용자 정의할 수 있습니다. 기본적으로 다음 비율 클래스가 제공됩니다.

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

<!-- 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>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

에서 사용하려는 종횡비 _variables.scss를 변경할 수 있습니다. 다음은 $embed-responsive-aspect-ratios목록의 예입니다.

$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (1 1)
) !default;