Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:[ratio-1x1 / ratio-4x3 / ratio-16x9 / ratio-21x9].
<div class="row gap-lg-0 gap-4">
<div class="col-lg-3">
<div class="ratio ratio-1x1">
<iframe src="https://www.youtube.com/embed/FjFWBcQPzSI?si=ZNk3GFvFTpZkPRlU" title="YouTube video" allowfullscreen=""></iframe>
</div>
</div>
<div class="col-lg-3">
<div class="ratio ratio-4x3">
<iframe src="https://www.youtube.com/embed/FjFWBcQPzSI?si=ZNk3GFvFTpZkPRlU" title="YouTube video" allowfullscreen=""></iframe>
</div>
</div>
<div class="col-lg-3">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/FjFWBcQPzSI?si=ZNk3GFvFTpZkPRlU" title="YouTube video" allowfullscreen=""></iframe>
</div>
</div>
<div class="col-lg-3">
<div class="ratio ratio-21x9">
<iframe src="https://www.youtube.com/embed/FjFWBcQPzSI?si=ZNk3GFvFTpZkPRlU" title="YouTube video" allowfullscreen=""></iframe>
</div>
</div>
</div>Wrap any embed, like an <iframe> , in a parent element with ratio and an aspect ratio class. Here is a breakdown of these ratios: ratio-4x3.
<div class="ratio ratio-4x3">
<iframe src="https://www.youtube.com/embed/FjFWBcQPzSI?si=ZNk3GFvFTpZkPRlU" title="YouTube video" allowfullscreen=""></iframe>
</div>Wrap any embed, like an <iframe> , in a parent element with ratio and an aspect ratio class. Here is a breakdown of these ratios: 16x9 ratio.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/FjFWBcQPzSI?si=ZNk3GFvFTpZkPRlU" title="YouTube video" allowfullscreen=""></iframe>
</div>