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>

【設定】

  • .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>

 

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>

 

任意のアスペクト比(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%;
}

 

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;
}

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

 

コメント

タイトルとURLをコピーしました