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

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

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

【設定】

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

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

21:9のアスペクト比

 

16:9のアスペクト比

 

4:3のアスペクト比

 

1:1のアスペクト比

 

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

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

padding-topは 高さ÷幅

 

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

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

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

 

スポンサーリンク