Source

埋め込む

任意のデバイスでスケーリングする固有の比率を作成することにより、親の幅に基づいてレスポンシブ ビデオまたはスライドショーの埋め込みを作成します。

約

<iframe>ルールは、<embed>、<video>、および<object>要素に直接適用されます。.embed-responsive-item他の属性のスタイルを一致させたい場合は、オプションで明示的な子孫クラスを使用します。

プロのヒント！を上書きするframeborder="0"ので、 sに含める必要はありません。<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),
  (3 4),
  (1 1)
) !default;