とほほのBootstrap 4入門

  1. トップ
  2. Bootstrap 4入門
  3. エンベッド

エンベッド

.embed-responsive, .embed-responsive-{aspect}, .embed-responsive-item は、<iframe>, <embed>, <video>, <object> に適用し、埋め込みオブジェクトのアスペクト比(縦横比)を固定化するのに役立ちます。{aspect} には 1by1, 4by3, 16by9, 21by9 のいずれかを指定しますが、Bootstrap を再ビルドする際にカスタマイズすることも可能です。

Sample

※ YouTube さんの動画を引用しています。

Code
<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>
Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
https://www.tohoho-web.com/bootstrap/embed.html