Iframeなどの埋め込み:Bootstrap 4

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

「Webサイトからお問い合わせが来ない…」とお悩みの方必見!
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

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

関連タグ:

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