Bootstrap4でインラインフレーム（Iframe）をレスポンシブに埋め込む

Bootstrap4ではYoutube動画やインラインフレームをレスポンシブで表示するクラスが用意されています。

<div>でくくり「embed-responsive」とアスペクト比「embed-responsive-16by9」のクラスを付与。読み込むファイルにはクラス「embed-responsive-item」を付与する。

インラインフレーム（Iframe）はフルスクリーン表示するので「allowfullscreen」を追加。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="読み込むファイル" allowfullscreen></iframe>
</div>

</div>

【設定】

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

アスペクト比（Aspect ratios）が標準で用意されている

21:9のアスペクト比

<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..." allowfullscreen></iframe>
</div>

</div>

16:9のアスペクト比

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..." allowfullscreen></iframe>
</div>

</div>

4:3のアスペクト比

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..." allowfullscreen></iframe>
</div>

</div>

1:1のアスペクト比

<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..." allowfullscreen></iframe>
</div>

</div>

任意のアスペクト比（Aspect ratios）を設定したい

それぞれのアスペクト比のスタイルシートは下記なので、％を計算してオリジナルのクラスを追加。

padding-topは　高さ÷幅

.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

.embed-responsive-21by9::before {

padding-top: 42.857143%;

}

.embed-responsive-16by9::before {

padding-top: 56.25%;

}

.embed-responsive-4by3::before {

padding-top: 75%;

}

.embed-responsive-1by1::before {

padding-top: 100%;

}

Bootstrap4の機能を使わず通常のCSSで設定する

アイフォンなどの一部で「embed-responsive」「embed-responsive-16by9」「embed-responsive-item」を使用すると表示がおかしくなる場合があります。その場合は従来のユーチューブなどで使っていた方法を使用します。

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.youtube {

position: relative;

width: 100%;

padding-top: 56.25%;

}

.youtube iframe {

position: absolute;

top: 0;

right: 0;

width: 100% !important;

height: 100% !important;

}

padding-top: 56.25%;の「56.25%」を上記の方法で計算した値に変更します。※クラス名も任意。