Iframeなどの埋め込み

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

コンテンツをシェア


このエントリーをはてなブックマークに追加