University of St Andrews

Responsive embed

Allow browsers to determine video or map dimensions based on the width of their containing block by creating a responsive ratio that will properly scale on any device.

First, give your iframe, embed, video or object element a class of embed-responsive-item then wrap it with the following HTML code:

<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item"></iframe>
</div>

The second class in the parent div decides the video's ratio. There are two choices:

• 16:9 embed-responsive-16by9 : use this to show videos, as its much 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.

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

Options available

• 16:9 (content whole)
• 4:3 (content whole)
• 16:9 (content thrids)
• 4:3 (content thrids)
• 16:9 (content halves)
• 4:3 (content halves)

16:9 (content whole)

<!-- 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.com/embed/Rv9hn4IGofM" class="embed-responsive-item"></iframe>
                </div>
            </div>
    </div>
</div>
<!-- End pattern: responsive-embed //-->

4:3 (content whole)

<!-- 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 thrids)

<!-- 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://player.vimeo.com/video/74640134" 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 thrids)

<!-- 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)

<!-- 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.com/embed/Rv9hn4IGofM" 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)

<!-- 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 //-->