動画の埋め込み～Bootstrap4移行ガイド

任意のデバイスで比例する比率を作成して、親要素の幅に基づいてレスポンシブなビデオまたはスライドショーの埋め込みを作成。

概要（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>

【設定】

.embed-responsive.embed-responsive-**by* > [<iframe>,<embed>,<video>,<object> のいずれかに .embed-responsive-item を入れる]
.embed-responsive.embed-responsive-**by* は下記の「アスペクト比の種類」から選択
フルスクリーン表示に対応するため <iframe> に [allowfullscreen] を入れる
※設定していない場合は、YouTubeでは「全画面表示はご利用いただけません」との表示が出る

アスペクト比（Aspect ratios）v4.0.0一部追加

アスペクト比は、修飾子クラスでカスタマイズ可能。

アスペクト比の種類

●21:9のアスペクト比
.embed-responsive embed-responsive-21by9 v4.0.0追加

●16:9のアスペクト比
.embed-responsive embed-responsive-16by9

●4:3のアスペクト比
.embed-responsive embed-responsive-4by3

●1:1のアスペクト比
.embed-responsive embed-responsive-1by1 v4.0.0追加

設定例

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

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

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

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

scss/_variables.scss 内で使用したいアスペクト比を変更可能。以下は $embed-respond-aspect-ratio リストの実例。

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

【注意】

v4.2.xの scss/_variables.scss にある $embed-responsive-aspect-ratios: join の (4 3), の部分が (3 4), となっており、v4.2.xでは誤って .embed-responsive-3by4 が生成されてしまい、.embed-responsive-4by3 は表示不能に⇒v4.3.0で修正済