埋め込み

任意のデバイスに適した比率を計算し、親要素の幅に基づくレスポンシブな動画やスライドショーを埋め込みます。

概要

ルールは <iframe>、<embed>、<video> および <object> 要素に直接適用されます。他の要素にスタイルを適用したいときは、明示的な子孫クラス .embed-responsive-item を使います。

プロのアドバイス！ 私たちがオーバーライドするので、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 のアスペクト比 -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 のアスペクト比 -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 のアスペクト比 -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 のアスペクト比 -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>