Bootstrap4ではYoutube動画やインラインフレームをレスポンシブで表示するクラスが用意されています。
<div>でくくり「embed-responsive」とアスペクト比「embed-responsive-16by9」のクラスを付与。読み込むファイルにはクラス「embed-responsive-item」を付与する。
インラインフレーム(Iframe)はフルスクリーン表示するので「allowfullscreen」を追加。
1 2 3 |
<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のアスペクト比
1 2 3 |
<div class="embed-responsive embed-responsive-21by9"> <iframe class="embed-responsive-item" src="..." allowfullscreen></iframe> </div> |
16:9のアスペクト比
1 2 3 |
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..." allowfullscreen></iframe> </div> |
4:3のアスペクト比
1 2 3 |
<div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..." allowfullscreen></iframe> </div> |
1:1のアスペクト比
1 2 3 |
<div class="embed-responsive embed-responsive-1by1"> <iframe class="embed-responsive-item" src="..." allowfullscreen></iframe> </div> |
任意のアスペクト比(Aspect ratios)を設定したい
それぞれのアスペクト比のスタイルシートは下記なので、%を計算してオリジナルのクラスを追加。
padding-topは 高さ÷幅
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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」を使用すると表示がおかしくなる場合があります。その場合は従来のユーチューブなどで使っていた方法を使用します。
1 2 3 4 5 6 7 8 9 10 11 12 |
.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%」を上記の方法で計算した値に変更します。※クラス名も任意。
コメント