とほほのBootstrap 4入門 - エンベッド

.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>