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
This wrapper div must have two classes: embed-responsive plus one that determines 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. Use this to display maps, in mobile view a smaller ratio makes them hard to view.
<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.
Options available
16:9 (content whole)
Code
Example
<!-- Begin pattern: responsive-embed //-->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="embed-responsive embed-responsive-16by9 google-map">
<iframe src='https://www.youtube-nocookie.com/embed/JxHfSwpddCU' class='embed-responsive-item'></iframe>
</div>
</div>
</div>
</div>
<!-- End pattern: responsive-embed //-->4:3 (content whole)
Code
Example
<!-- Begin pattern: responsive-embed //-->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="embed-responsive embed-responsive-4by3 google-map">
<iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2211.399529804193!2d-2.816029683587382!3d56.34019068071458!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x488657829e5cbb3f%3A0xc253a6b45fc4cc48!2sAgnes+Blackadder+Hall!5e0!3m2!1sen!2suk!4v1484316949822' class='embed-responsive-item'></iframe>
</div>
</div>
</div>
</div>
<!-- End pattern: responsive-embed //-->16:9 (content thirds)
Related content
- Item 1
- Item 2
- Item 3
Code
Example
<!-- Begin pattern: responsive-embed //-->
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="embed-responsive embed-responsive-16by9 google-map">
<iframe src='https://www.youtube-nocookie.com/embed/JxHfSwpddCU' class='embed-responsive-item'></iframe>
</div>
</div>
<div class="col-sm-4">
<!-- Begin pattern: navbox //--> <div class='navbox big-target-click-zone'> <div class='navbox-image'> <img src='../../assets/docs/images/placeholders/360x240.jpg' alt='Description'> </div> <div class='navbox-title'> <p><a class='big-target-anchor' href='#'>Accommodation</a></p> </div> </div> <!-- End pattern: navbox //--><h3>Related content</h3><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
</div>
</div>
</div>
<!-- End pattern: responsive-embed //-->4:3 (content thirds)
Related content
- Item 1
- Item 2
- Item 3
Code
Example
<!-- Begin pattern: responsive-embed //-->
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="embed-responsive embed-responsive-4by3 google-map">
<iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2211.399529804193!2d-2.816029683587382!3d56.34019068071458!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x488657829e5cbb3f%3A0xc253a6b45fc4cc48!2sAgnes+Blackadder+Hall!5e0!3m2!1sen!2suk!4v1484316949822' class='embed-responsive-item'></iframe>
</div>
</div>
<div class="col-sm-4">
<!-- Begin pattern: navbox //--> <div class='navbox big-target-click-zone'> <div class='navbox-image'> <img src='../../assets/docs/images/placeholders/360x240.jpg' alt='Description'> </div> <div class='navbox-title'> <p><a class='big-target-anchor' href='#'>Accommodation</a></p> </div> </div> <!-- End pattern: navbox //--><h3>Related content</h3><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
</div>
</div>
</div>
<!-- End pattern: responsive-embed //-->16:9 (content halves)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor. Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam.
Code
Example
<!-- Begin pattern: responsive-embed //-->
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9 google-map">
<iframe src='https://www.youtube-nocookie.com/embed/JxHfSwpddCU' class='embed-responsive-item'></iframe>
</div>
</div>
<div class="col-sm-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor. Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam.</p>
</div>
</div>
</div>
<!-- End pattern: responsive-embed //-->4:3 (content halves)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor. Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam.
Code
<!-- Begin pattern: responsive-embed //-->
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="embed-responsive embed-responsive-4by3 google-map">
<iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2211.399529804193!2d-2.816029683587382!3d56.34019068071458!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x488657829e5cbb3f%3A0xc253a6b45fc4cc48!2sAgnes+Blackadder+Hall!5e0!3m2!1sen!2suk!4v1484316949822' class='embed-responsive-item'></iframe>
</div>
</div>
<div class="col-sm-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor. Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam.</p>
</div>
</div>
</div>
<!-- End pattern: responsive-embed //-->