Toggle navigation

Blocks

Embedded content

Read the official Bootstrap documentation for embedded content.

YouTube video

<div class="flex-video widescreen">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/kXE0oo_jEXQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true"></iframe>
</div>
<div class="embed-responsive embed-responsive-16by9">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/8vKEB13rMLU" frameborder="0" title="BSc Accounting and Finance - Lucy Dobbin" allowfullscreen></iframe>
</div>

The class flex-video helps web browsers to determine the dimensions of embedded content based on their width. Used on it's own the class flex-video sizes the content to a 4 by 3 ratio. Combined with the class widescreen it creates a 16 by 9 or widescreen ratio that works well with YouTube videos. The Bootstrap classes embed-responsive and embed-responsive-16by9 may be used instead.

Use the allowfullscreen attribute to enable embedded videos to be displayed full screen. This is set to true if the attribute is present but you may also use allowfullscreen="true". If this isn't set, the video can't be placed into full screen mode.

There is no way to guarantee the accessibility of third party embedded content.

The best way is to create accessible content or link out to the third party website.

Always provide a title attribute.

Use descriptive titles and captions for your videos. If your video contains critical information, provide a transcript too.

Add your own subtitles & closed captions to YouTube videos.

Top of page

YouTube video in a feature box

Understanding the University Regulations

Liz Turner, Head of Academic Policy and Quality Office, provides an overview of the regulations and what they mean to students and staff in practical terms.

<div class="feature-box bg-lightgrey padding10">
    <div class="row">
        <div class="col-xs-12 col-md-6 col-lg-6">
            <h2>Understanding the University Regulations</h2>
            <p>Liz Turner, Head of Academic Policy and Quality Office, provides an overview of the regulations and what they mean to students and staff in practical terms.</p>
        </div>
        <div class="col-xs-12 col-md-6 col-lg-6">
            <div class="flex-video widescreen">
                <iframe width="100%" src="https://www.youtube.com/embed/xreReg7LPwQ?rel=0" frameborder="0" title="Understanding the University Regulations" allowfullscreen="true"></iframe>
            </div>
        </div>
    </div>
</div>

Use the classes flex-video and widescreen. The Bootstrap classes embed-responsive and embed-responsive-16by9 may be used instead.

Use the allowfullscreen attribute to enable embedded videos to be displayed full screen. This is set to true if the attribute is present but you may also use allowfullscreen="true". If this isn't set, the video can't be placed into full screen mode.

There is no way to guarantee the accessibility of third party embedded content.

The best way is to create accessible content or link out to the third party website.

Always provide a title attribute.

Use descriptive titles and captions for your videos. If your video contains critical information, provide a transcript too.

Add your own subtitles & closed captions to YouTube videos.

Top of page

Google calendar

<div class="flex-video calendar">
<iframe src="https://www.google.com/calendar/b/0/embed?height=600&amp;wkst=2&amp;bgcolor=%23FFFFFF&amp;src=brookes.ac.uk_2d393432333230352d343238%40resource.calendar.google.com&amp;color=%232952A3&amp;ctz=Europe%2FLondon" style=" border-width:0 " width="650" height="600" frameborder="0" scrolling="no" title="Exam calendar"></iframe>
</div>

Use the classes flex-video and calendar. The Bootstrap classes embed-responsive and calendar may be used instead.

There is no way to guarantee the accessibility of third party embedded content.

The best way is to create accessible content or link out to the third party website.

Always provide a title attribute.

Top of page

Google map

<div class="flex-video google-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2469.8811900710407!2d-1.226248634220982!3d51.753496079676395!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876c15d9706a113%3A0x995f45fccbb71022!2sOxford+OX3+0BP%2C+UK!5e0!3m2!1sen!2sus!4v1463054080263" width="600" height="450" frameborder="0" style="border:0" allowfullscreen title="Headington Campus map"></iframe>
</div>

Use the classes flex-video and google-map. The Bootstrap classes embed-responsive and google-map may be used too.

There is no way to guarantee the accessibility of third party embedded content.

The best way is to create accessible content or link out to the third party website.

Always provide a title attribute.

Top of page

Google form

<div class="flex-video embed-form">
        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdgWuYI0w7Cn_Wh4s-LQ947k4FNW10F7EO3QBf3afkSh3zmAA/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0" title="Test form"></iframe>
</div>

Use the classes flex-video and embed-form. The Bootstrap classes embed-responsive and embed-form may be used too.

There is no way to guarantee the accessibility of third party embedded content.

The best way is to create accessible content or link out to the third party website.

Always provide a title attribute.

Top of page

Changelog

Added Updates Current version Accessibility Status
2 December 2016 N/A 1.0.0 Needs review Current

Top of page