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

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.

Cookie consent for YouTube examples

The YouTube examples add youtube-embed to the responsive wrapper and use youtube-nocookie.com URLs in data-src, with data-cc-category="functionality". Keep the iframe without a src attribute until consent is granted. When using the Handlebars partial, set youtube to true to add the YouTube wrapper class.

The embedding site's Civic Cookie Control integration must activate these iframes after functionality consent and unload them when consent is withdrawn. This pattern supplies the markup; the site must provide the consent handling code.

Options available

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 youtube-embed">
    <iframe title='YouTube video player' class='embed-responsive-item' data-src='https://www.youtube-nocookie.com/embed/iSv25HQzPb0' data-cc-category='functionality' referrerpolicy='strict-origin-when-cross-origin' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen></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 youtube-embed">
    <iframe title='YouTube video player' class='embed-responsive-item' data-src='https://www.youtube-nocookie.com/embed/iSv25HQzPb0' data-cc-category='functionality' referrerpolicy='strict-origin-when-cross-origin' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen></iframe>
</div>
<!-- End pattern: responsive-embed //-->