埋め込み
任意のデバイスに適した比率を計算し、親要素の幅に基づくレスポンシブな動画やスライドショーを埋め込みます。
概要
ルールは <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>
アスペクト比
アスペクト比は修飾子つきクラスでカスタマイズできます。