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 responsive embed

To embed YouTube videos please use the video pattern.
To embed SoundCloud files please use the audio pattern.
To embed Google maps please use the Google Maps pattern.

How to use

This wrapper div must have two classes: embed-responsive class, and another that specifies its aspect ratio.

There are two ratios available:

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

<div class="embed-responsive embed-responsive-16by9">
[iframe, embed, video or object with embed-responsive-item class]
</div>

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

16:9 ratio

The YouTube video is shown for demonstration purposes of a media object only. The video pattern should be used for fully supported YouTube video embedding.

Example

Code

<!-- Begin pattern: responsive-embed //-->
<div class="embed-responsive embed-responsive-16by9">
    <iframe src='https://www.youtube-nocookie.com/embed/iSv25HQzPb0' title='YouTube video player' allowfullscreen class='embed-responsive-item'></iframe>
</div>
<!-- End pattern: responsive-embed //-->

4:3 ratio

The YouTube video is shown for demonstration purposes of a media object only. The video pattern should be used for fully supported YouTube video embedding.

Example

Code

<!-- Begin pattern: responsive-embed //-->
<div class="embed-responsive embed-responsive-4by3">
    <iframe src='https://www.youtube-nocookie.com/embed/iSv25HQzPb0' title='YouTube video player' allowfullscreen class='embed-responsive-item'></iframe>
</div>
<!-- End pattern: responsive-embed //-->