BootstrapHow-ToBeginner · 4 min read

How to Use Responsive Embed in Bootstrap for Videos and Iframes

Use Bootstrap's ratio utility classes like ratio ratio-16x9 to wrap your <iframe> or <video> elements. This makes embedded content scale responsively while keeping the correct aspect ratio.

📐

Syntax

Wrap your embedded content inside a container with the ratio class and an aspect ratio class like ratio-16x9 or ratio-4x3. Inside this container, place your <iframe>, <video>, or <embed> element without width or height attributes.

ratio: Base class to enable responsive embed.
ratio-16x9, ratio-4x3, ratio-1x1: Aspect ratio classes to keep the correct shape.

html

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video" allowfullscreen></iframe>
</div>

Output

A YouTube video embedded responsively with a 16:9 aspect ratio, scaling to fit the container width.

💻

Example

This example shows how to embed a YouTube video responsively using Bootstrap's ratio classes. The video keeps its 16:9 shape and resizes on different screen sizes.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Responsive Embed Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container mt-4">
    <h1>Responsive Video Embed</h1>
    <div class="ratio ratio-16x9">
      <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video" allowfullscreen></iframe>
    </div>
  </main>
</body>
</html>

Output

A webpage with a heading and a responsive YouTube video that scales with the browser width, maintaining a 16:9 ratio.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap responsive embed include:

Not wrapping the embedded content inside a ratio container, causing fixed sizes and poor scaling.
Setting explicit width or height attributes on the embedded element, which breaks responsiveness.
Using outdated Bootstrap classes like embed-responsive from Bootstrap 4 instead of ratio in Bootstrap 5.

html

<!-- Wrong: fixed width and height on iframe -->
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" allowfullscreen></iframe>
</div>

<!-- Right: no width or height attributes -->
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
</div>

Output

The first iframe will not scale properly because of fixed width and height; the second iframe scales responsively inside the ratio container.

📊

Quick Reference

Bootstrap responsive embed cheat sheet:

Class	Description
ratio	Base class to enable responsive embed container
ratio-16x9	Sets aspect ratio to 16:9 (widescreen)
ratio-4x3	Sets aspect ratio to 4:3 (standard)
ratio-1x1	Sets aspect ratio to 1:1 (square)
No width/height on embedded element	Ensures responsiveness inside ratio container

✅

Key Takeaways

Wrap embedded content in a div with ratio and an aspect ratio class like ratio-16x9.

Do not set fixed width or height on the embedded iframe or video elements.

Use Bootstrap 5's ratio classes, not the older embed-responsive classes.

Responsive embed containers keep your videos and iframes scaling nicely on all screen sizes.

Test your embed on different devices to ensure the aspect ratio and responsiveness work as expected.