Bootstrap4でiframeをレスポンシブ化して埋め込む方法

Bootstrapでの指定方法

Bootstrap4でiframeをレスポンシブ化する際、普通にCSSで指定していたのですが、ちゃんと専用のクラスが用意されていたのでそちらを使うことにしました。

HTML

<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item" src="読み込みファイル" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

まず、iframeを<div>で囲みます。
その<div>タグに「embed-responsive」と「embed-responsive-16by9」のクラスを付与します。
次にiframeに対して「embed-responsive-item」というクラスを付与するだけでレスポンシブ化されます。

以下で、通常のCSSとBootstrap使用時とを比べています。

See the Pen Bootstrap4 iframe responsive by AlanSmithee21 (@alansmithee21) on CodePen.

別ウィンドウはこちら

divタグの「embed-responsive-16by9」クラスとは？

「embed-responsive-16by9」でアスペクト比を指定できます。

用意されているのは４つ。

HTML

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

おまけ：Bootstrap4を使わずに通常のCSSで指定する方法

HTML

<div class="gmap-css-responsive">
	<iframe src="読み込みファイル" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

CSS

.gmap-css-responsive {
  height: 0;
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%;
}
.gmap-css-responsive iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}