What is Ratio utilities for embeds in Bootsrap?

Bootsrapmarkup~5 mins

Ratio utilities for embeds in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Ratio utilities help keep embedded content like videos or iframes at the right shape and size. This stops them from looking stretched or squished on different screens.

You want to add a YouTube video that looks good on phones and computers.

Embedding a Google Map that should keep its shape no matter the screen size.

Adding a responsive iframe for a presentation or slideshow.

Making sure a video player stays the same width-to-height ratio on all devices.

Syntax

Bootsrap

<div class="ratio ratio-16x9">
  <iframe src="URL" title="Description" allowfullscreen></iframe>
</div>

Replace 16x9 with the desired aspect ratio like 4x3 or 1x1.

The ratio class creates a container that keeps the aspect ratio for the embedded content inside.

Examples

This example embeds a YouTube video with a 16:9 ratio, which is common for widescreen videos.

Bootsrap

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

This example embeds a Google Map with a 4:3 ratio, which is a bit more square than widescreen.

Bootsrap

<div class="ratio ratio-4x3">
  <iframe src="https://maps.google.com/maps?q=New+York&t=&z=13&ie=UTF8&iwloc=&output=embed" title="Google Map" allowfullscreen></iframe>
</div>

This example uses a 1:1 ratio for a square embed, good for some presentations or images.

Bootsrap

<div class="ratio ratio-1x1">
  <iframe src="https://example.com/slideshow" title="Slideshow embed" allowfullscreen></iframe>
</div>

Sample Program

This full HTML page uses Bootstrap's ratio utility to embed a YouTube video. The video stays nicely shaped on phones, tablets, and desktops.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Ratio Utility 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 my-4">
    <h1>Responsive Video Embed with Bootstrap Ratio</h1>
    <p>This video keeps its 16:9 shape on all screen sizes.</p>
    <div class="ratio ratio-16x9">
      <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" allowfullscreen></iframe>
    </div>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Always add a title attribute to iframes for accessibility.

The ratio container uses padding tricks to keep the aspect ratio fluid and responsive.

You can nest any embed inside the ratio container, not just iframes.

Summary

Ratio utilities keep embedded content looking good on all devices.

Use classes like ratio-16x9 or ratio-4x3 to set the shape.

Wrap your iframe or embed inside a div with the ratio class.