Embeds

Embeds(エンベッド)は任意のデバイスで比例する比率で, 親要素の幅に基づいてレスポンシブなビデオやスライドショーの埋め込みをできます。エンベッドユーティリティの使い方の例を示します。

About

ルールは<iframe>, <embed>, <video>, <object>要素に直接適用することです。 :
他の属性のスタイリングにマッチさせたいときは, オプションで .embed-responsive-item クラスを使います。
<iframe> に frameborder =" 0 "を追加する必要はありません。

Example

.embed-responsiveとアスペクト比を持つ親要素に <iframe> のような埋め込みをラップします。
.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>

Aspect ratios

アスペクト比は下記のようにカスタマイズ可能です。

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

v4.5