About

Rules are directly applied to <iframe>, <embed>,<video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

Pro-Tip! You don’t need to include frameborder-"0" in your<iframe> as we override that for you.

Example

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.

Aspect Ratios

Aspect ratios can be customized with modifier classes. By default, the following ratio classes are provided:

<div className="embed-responsive embed-responsive-16by9">
  <!-- 21:9 aspect ratio -->
  <div className="embed-responsive embed-responsive-21by9">
    <iframe className="embed-responsive-item" src="..."></iframe>
  </div>

  <!-- 16:9 aspect ratio -->
  <div className="embed-responsive embed-responsive-16by9">
    <iframe className="embed-responsive-item" src="..."></iframe>
  </div>

  <!-- 4:3 aspect ratio -->
  <div className="embed-responsive embed-responsive-4by3">
    <iframe className="embed-responsive-item" src="..."></iframe>
  </div>

  <!-- 1:1 aspect ratio -->
  <div className="embed-responsive embed-responsive-1by1">
    <iframe className="embed-responsive-item" src="..."></iframe>
  </div>
</div>