メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

動画の埋め込み(Embeds) v4.0.0一部追加

任意のデバイスで比例する比率を作成して、親要素の幅に基づいてレスポンシブなビデオまたはスライドショーの埋め込みを作成。

概要(About)

ルールは <iframe>, <embed>, <video>, <object> 要素に直接適用される。別の属性のスタイルに合わせる場合は、オプションで明示的な子孫クラス .embed-responsive-item を使用。

注意: <iframe>frameborder="0" を入れる必要はない。

 

実例(Example)

.embed-responsive とアスペクト比を持つ親要素を <iframe> のような埋め込みで囲む。.embed-responsive-item は、厳密には必須ではないが推奨。

見本
設定例

<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" 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)v4.0.0一部追加

アスペクト比は、修飾子クラスでカスタマイズ可能。

アスペクト比の種類

●21:9のアスペクト比
.embed-responsive embed-responsive-21by9 v4.0.0追加

●16:9のアスペクト比
.embed-responsive embed-responsive-16by9

●4:3のアスペクト比
.embed-responsive embed-responsive-4by3

●1:1のアスペクト比
.embed-responsive embed-responsive-1by1 v4.0.0追加

設定例
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>

scss/_variables.scss 内で使用したいアスペクト比を変更可能。以下は $embed-respond-aspect-ratio リストの例。

$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (1 1)
) !default;

【注意】

  • v4.2.xの scss/_variables.scss にある $embed-responsive-aspect-ratios: join(4 3), の部分が (3 4), となっており、v4.2.xでは誤って .embed-responsive-3by4 が生成されてしまい、.embed-responsive-4by3 は表示不能に⇒v4.3.0で修正済