While `img-fluid` easily fixes standard pictures, what happens when you try to embed a YouTube Video or a Google Map onto your web page? Because these elements use complex HTML <iframe> tags, they absolutely refuse to shrink gracefully. A 600px wide video will blindly smash right through your mobile screen borders, ruining the layout.
Bootstrap 5 solves this elegantly using the Ratio helper (historically known in Bootstrap 4 as "Embed Responsive").
You cannot directly apply classes to the raw iframe tag itself to make it fully responsive. Instead, you must carefully wrap the iframe inside a parent <div> container equipped with specific Ratio classes.
You need two classes on the wrapper container:
.ratio: The base class that mechanically structures the container securely to hold the embed safely..ratio-*: The active modifier dictating exactly what mathematical Aspect Ratio to strictly enforce (like Widescreen or Square).There are four heavily standardized ratios inherently built into Bootstrap. The absolute most important one is .ratio-16x9, as this perfectly matches the native dimensions of modern HD video providers like YouTube and Vimeo.
.ratio-1x1 (Perfect Square, often used for Map widgets).ratio-4x3 (Standard Definition, old TV format).ratio-16x9 (High Definition Widescreen, default for YouTube/Twitch).ratio-21x9 (Cinematic Ultra-Widescreen)Resize your browser window specifically right now. The `iframe` cleanly shrinks dynamically without any messy black letterboxing or clipped edges!
<!-- Wrap the iFrame intelligently inside a parent div equipped precisely with .ratio and .ratio-16x9! -->
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8" allowfullscreen></iframe>
</div>width/height attributes on the iframe can conflict with it and cause layout jumps.
.ratio alone does nothing — it must be paired with a specific ratio like .ratio-16x9 to actually constrain the aspect ratio.
--bs-aspect-ratio custom property pattern.
A second example — using the 1:1 ratio, which suits compact map or profile embeds better than widescreen video:
<div class="ratio ratio-1x1" style="max-width: 400px;">
<iframe src="https://www.google.com/maps/embed?..." title="Map"></iframe>
</div>Q: Does the ratio wrapper work with a plain <video> tag too?
A: Yes — it works with any embedded content element, not just iframes, including <video>, <embed>, and <object>.
Q: Can I create a custom aspect ratio like 3:2?
A: Yes — set the CSS custom property directly: style="--bs-aspect-ratio: 66.6667%" on the .ratio element.
Q: Why is this called "Ratio" instead of "Embed Responsive" like in Bootstrap 4?
A: Bootstrap 5 renamed and generalized the utility to work with any content, not just embeds. See the official Ratio documentation for full details.