Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<div class="ratio ratio-1x1">
  <iframe src="https://player.vimeo.com/video/40509381"></iframe>
</div>

   Copy to clipboard

   Open in CodePen

<div class="ratio ratio-4x3">
  <iframe src="https://player.vimeo.com/video/301032654"></iframe>
</div>

   Copy to clipboard

   Open in CodePen

<div class="ratio ratio-16x9">
  <iframe src="https://player.vimeo.com/video/77923619"></iframe>
</div>

   Copy to clipboard

   Open in CodePen

<div class="ratio ratio-21x9">
  <iframe src="https://player.vimeo.com/video/96184605"></iframe>
</div>

   Copy to clipboard

   Open in CodePen

<div class="d-flex align-items-start">
  <div class="ratio ratio-1x1">
    <p class="d-flex justify-content-center align-items-center border">1x1</p>
  </div>
  <div class="ratio ratio-4x3">
    <p class="d-flex justify-content-center align-items-center border">4x3</p>
  </div>
  <div class="ratio ratio-16x9">
    <p class="d-flex justify-content-center align-items-center border">16x9</p>
  </div>
  <div class="ratio ratio-21x9">
    <p class="d-flex justify-content-center align-items-center border">21x9</p>
  </div>
</div>

   Copy to clipboard

   Open in CodePen

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <p class="d-flex justify-content-center align-items-center border">2x1 (50%)</p>
</div>
<div class="ratio" style="--bs-aspect-ratio: 25%;">
  <p class="d-flex justify-content-center align-items-center border">4x1 (25%)</p>
</div>