Iframeなどの埋め込み:Bootstrap 4

Youtube動画や、SlideshareのスライドなどをWebサイトに埋め込むにはIframeを使いますが、これらの埋め込みをレスポンシブにします。 そのほかにも <embed>, <video>, <object>に適用されます。

Embed

例：

<div class="embed-responsive embed-responsive-16by9">
 <iframe class="embed-responsive-item" src="..."></iframe>
</div>

結果：

アスペクト比

アスペクト比は「embed-responsive-****」で指定することができます。

• .embed-responsive-21by9
• .embed-responsive-16by9
• .embed-responsive-4by3
• .embed-responsive-1by1