embed-responsive-16by9

bootstrap5.css

bootstrap5.css

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

html bootstrap5 Sample

Embed埋め込み/アスペクト比16:9：embed-responsive

  <!-- 大きさが自動調整される -->
  <!-- アスペクト比を持つ親要素に iframe のような埋め込みをラップします -->
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/SGqg_ZzThDU?rel=0"
      allowfullscreen></iframe>
  </div>