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

関連タグ:

ビジネス活用に必要な機能がそろった
法人向け共用レンタルサーバー「SV-Basic」

お申し込み(10日間無料お試し付)

CPIの最新情報をTwitterでチェックできます!
@cpiadjp
次へ
前へ