Responsive embed

The responsive embed pattern automatically determines the dimensions of media content based on the width of the containers they are embedded in. A fixed ratio allows embedded content to scale appropriately on any device.

Rules for the responsive embed

This wrapper div must have two classes: embed-responsive plus one that determines its aspect ratio.

There are two ratios available:

16:9embed-responsive-16by9. Use this to show videos, it is better suited for use with HD media.

4:3embed-responsive-4by3. Use this to display maps, in mobile view a smaller ratio makes them hard to view.

// iframe, embed, video or object with embed-responsive-item class

You don't need to include frameborder="0" in your iframe as Bootstrap overrides that for you.