Media Embeds

Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.


Wrap any embed like an <iframe> in a parent element with .embed-responsive and an aspect ratio.
The .embed-responsive-item isn’t strictly required, but we encourage it.

Code Example
<div class="embed-responsive">
  <iframe class="embed-responsive-item" src="..." allowfullscreen></iframe>

Aspect Eatios

Aspect ratios can be customized with modifier classes. By default the following ratio classes are available.

Class Reference Value
.embed-responsive-{value} 21by9 | 16by9 | 4by3 | 1by1
Uses Example
<div class="embed-responsive embed-responsive-16by9">...</div>