Bootstrap Responsive Embeds: Making Videos and Iframes Adaptive

Learn how to create responsive embeds (videos, iframes) using Bootstrap utility classes. This tutorial shows you how to ensure your embedded content scales perfectly across different screen sizes, maintaining aspect ratio and optimal user experience.

Bootstrap Responsive Helpers

Responsive Embeds

Bootstrap provides utility classes for making embeds (like videos and iframes) responsive. This means the embed will automatically resize to fit its container, maintaining aspect ratio across different screen sizes. These classes are applied directly to the embed element (`<iframe>`, `<video>`, `<embed>`, `<object>`). The `.embed-responsive-item` class is optionally used to style the inner content of the responsive embed. Bootstrap automatically handles the `frameborder="0"` attribute so you don't need to explicitly add it to your embed elements.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.example.com/video.html"></iframe>
</div>

Modifier classes (e.g., `embed-responsive-21by9`, `embed-responsive-16by9`) control the aspect ratio.

Responsive Floats

Bootstrap offers utility classes to control element floating (using CSS's `float` property) based on viewport size. These classes use the same breakpoints as the Bootstrap grid system. The `!important` flag is often included to override other style rules. There are also non-responsive Sass mixins available for simpler, non-breakpoint specific floating control.

Syntax for Responsive Floats

The classes follow this pattern:

• .float-left (or .float-left-sm, .float-left-md, etc.): Floats the element to the left.
• .float-right (or .float-right-sm, .float-right-md, etc.): Floats the element to the right.
• .float-none (or .float-none-sm, .float-none-md, etc.): Removes any floating.

Sass Mixins for Floating

For simple non-responsive floating, Bootstrap provides Sass mixins:

.element {
  @include float-left;
}