Media
Wrap any embed, like an <iframe>, in a parent element with .ratio and an aspect ratio class.
https://getbootstrap.com/docs/5.1/helpers/ratio/Examples
Local video
Youtube
Vimeo
Facebook Embed
<!--
Ratio classes
.ratio-1x1
.ratio-4x3
.ratio-16x9
.ratio-21x9
Custom ratio
style="--bs-aspect-ratio: 50%;"
-->
<!-- Local Video -->
<div class="ratio ratio-16x9">
<video preload="auto" controls="controls" poster="../demo.files/video/hd0936.jpg">
<source src="../demo.files/video/hd0936.webm" type="video/webm;">
<source src="../demo.files/video/hd0936.mp4" type="video/mp4;">
</video>
</div>
<!-- Youtube -->
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/W5Yst1Si3fw" width="560" height="315"></iframe>
</div>
<!-- Vimeo -->
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="//player.vimeo.com/video/56624256" width="800" height="450"></iframe>
</div>
<!-- Facebook Embed -->
<div class="ratio ratio-16x9">
<iframe src="https://www.facebook.com/plugins/video.php?href=https://www.facebook.com/gary/videos/217526812176185/&show_text=0&width=560" width="560" height="315" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
</div>