Video modal windows - Components

Components

Video modal windows display a pop up modal with an embedded video.

Single video modal window

Some of our students talk about studying at Brookes, new ways of learning, support from their lecturers, and favourite places to study.

Inspirational teaching »

At Brookes, you’ll find that teaching staff not only share their knowledge and enthusiasm for their subject, but also go that extra mile to support their students.

A vibrant place to learn »

You’ll enjoy high-quality learning spaces, outstanding library resources and specialist facilities, whatever subject you study.

<div class="row flex-row tiled">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <a onclick="startoverlay()" data-toggle="modal" data-target="overlay" href="#" title="Watch video" class="flex-item box-link bg-lightgrey fg-darkgrey">
            <div class="tiled-image" id="img0">
                <div class="tiled-overlay">
                    <h3 class="sm-title hblack text-uppercase"><strong class="fg-white">&nbsp;<span class="fa fa-play" aria-label="Play"></span>&nbsp;</strong></h3>
                </div>
            </div>
            <div class="tiled-body">
                <p>Some of our students talk about studying at Brookes, new ways of learning, support from their lecturers, and favourite places to study.</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <a href="/your-link-here/" class="flex-item box-link bg-lightgrey fg-darkgrey">
            <div class="tiled-image" id="img1">
                <div class="tiled-overlay">
                    <h3 class="sm-title hblack text-uppercase"><span class="fg-white">Inspirational teaching&nbsp;»</span></h3>
                </div>
            </div>
            <div class="tiled-body">
                <p>At Brookes, you’ll find that teaching staff not only share their knowledge and enthusiasm for their subject, but also go that extra mile to support their students.</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <a href="/your-link-here/" class="flex-item box-link bg-lightgrey fg-darkgrey">
            <div class="tiled-image" id="img2">
                <div class="tiled-overlay">
                    <h3 class="sm-title hblack text-uppercase"><span class="fg-white">A vibrant place to learn&nbsp;»</span></h3>
                </div>
            </div>
            <div class="tiled-body">
                <p>You’ll enjoy high-quality learning spaces, outstanding library resources and specialist facilities, whatever subject you study.</p>
            </div>
        </a>
    </div>
</div>
<script>
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('video', { events: { 'onReady': onPlayerReady } });
}
function onPlayerReady(event) {
    var pauseButton = document.getElementById('close-button');
    pauseButton.addEventListener('click', function () {
        player.pauseVideo();
    });
}
var tag = document.createElement('script');
tag.src = '//www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
<script>
function startoverlay() {
    el = document.getElementById("overlay");
    el.style.display = (el.style.display == "block") ? "none" : "block";
    els = document.getElementById("modal-backdrop");
    els.style.display = (els.style.display == "block") ? "none" : "block";
}
</script>
<style>
/***** Modal *****/
.modal-backdrop { display: none; }
.modal-full {
    max-width: 1290px;
    width: 100%;
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 0 auto;
    background: rgba(0,0,0,.7);
}
.modal-backdrop.in {
    filter: alpha(opacity=7);
    opacity: 0.7;
}
.modal-content {
    background: none;
    border: 0;
    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
.modal-body {
    padding: 0 25px 25px 25px;
}
.modal-header {
    padding: 30px 25px 10px 25px;
    text-align: right;
}
.modal-header, .modal-footer {
    border: 0;
}
.modal-header .close {
    float: none;
    margin: 0;
    font-size: 36px;
    color: #fff;
    font-weight: 300;
    text-shadow: none;
    opacity: 1;
}
</style>
<div id="overlay" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
            <div class="modal-header text-right">
                <button type="button" class="close" id="close-button" onclick="startoverlay()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe id="video" class="embed-responsive-item" src="https://www.youtube.com/embed/pKqlU-ADfXI?enablejsapi=1" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modal-backdrop" class="modal-backdrop fade in"></div>

Example of a modal window with YouTube video.

You must include:

The id="close-button" on the button
The id="video" on the iframe
JavaScript to open and close modal
JavaScript to stop video playing when closed
CSS to style modal. (CSS not in standard.css as of 13 April 2018)

This example uses tiled image panels but you can use any design to trigger the modal window.

The element that serves as the dialog container should have a role of dialog.

The dialog has either an aria-labelledby property set to refer to the visible dialog title or a label specified with aria-label.

The close button should have an aria-label e.g. aria-label="Close".

View the WAI-ARIA practices documentation for more information.

Top of page

Multiple video modal windows

Video: A-Z of Brookes - Oxford Brookes University means many things to our students. What will it mean to you?

Video: Some of our students share how they adjusted to life in Oxford, from settling into halls to favourite activities and places to go in the city.

Oxford »

Culture, shopping, green spaces and a vibrant student nightlife... you won’t be short of things to inspire and entertain you.

<div class="row flex-row tiled">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <a onclick="startoverlay1()" data-toggle="modal" data-target="#overlay1" href="#" title="Watch video" class="flex-item box-link bg-lightgrey fg-darkgrey">
            <div class="tiled-image" id="img01">
                <div class="tiled-overlay">
                    <p class="mb0"><strong class="fg-white"> <span class="fa fa-play"></span></strong></p>
                </div>
            </div>
            <div class="tiled-body">
                <p>Video: A-Z of Brookes - Oxford Brookes University means many things to our students. What will it mean to you?</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <a onclick="startoverlay2()" data-toggle="modal" data-target="#overlay2" href="#" title="Watch video" class="flex-item box-link bg-lightgrey fg-darkgrey">
            <div class="tiled-image" id="img02">
                <div class="tiled-overlay">
                    <p class="mb0"><strong class="fg-white"> <span class="fa fa-play"></span></strong></p>
                </div>
            </div>
            <div class="tiled-body">
                <p>Video: Some of our students share how they adjusted to life in Oxford, from settling into halls to favourite activities and places to go in the city.</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <a href="/your-link-here/" title="Oxford" class="flex-item box-link bg-lightgrey fg-darkgrey">
            <div class="tiled-image" id="img03">
                <div class="tiled-overlay">
                    <h3 class="sm-title hblack text-uppercase"><span class="fg-white">Oxford »</span></h3>
                </div>
            </div>
            <div class="tiled-body">
                <p>Culture, shopping, green spaces and a vibrant student nightlife... you won’t be short of things to inspire and entertain you.</p>
            </div>
        </a>
    </div>
</div>
<script>
var player1;
var player2;
function onYouTubePlayerAPIReady() {
    player1 = new YT.Player('video1', { events: { 'onReady': onPlayerReady } });
    player2 = new YT.Player('video2', { events: { 'onReady': onPlayerReady } });
}
function onPlayerReady(event) {
    var pauseButton1 = document.getElementById('close-button1');
    pauseButton1.addEventListener('click', function () {
        player1.pauseVideo();
    });
    var pauseButton2 = document.getElementById('close-button2');
    pauseButton2.addEventListener('click', function () {
        player2.pauseVideo();
    });
}
var tag = document.createElement('script');
tag.src = '//www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
<script>
function startoverlay1() {
    el = document.getElementById("overlay1");
    el.style.display = (el.style.display == "block") ? "none" : "block"; 
    els = document.getElementById("modal-backdrop");
    els.style.display = (els.style.display == "block") ? "none" : "block";
}
function startoverlay2() {
    el = document.getElementById("overlay2");
    el.style.display = (el.style.display == "block") ? "none" : "block";
    els = document.getElementById("modal-backdrop");
    els.style.display = (els.style.display == "block") ? "none" : "block";
} 
</script>
<style>
#img01 { 
    background-image: url(//www.brookes.ac.uk/assets/0/1425/1426/2147484555/2147495220/031d5bda67fa44fcbd877731527d6c42.jpg);
}
#img02 {
    background-image: url(//www.brookes.ac.uk/assets/0/1425/1426/2147484555/2147495220/716b808860764e0cb5a3a0b53b8717e8.jpg);
}
#img03 {
    background-image: url(//www.brookes.ac.uk/assets/0/1425/1426/2147484555/2147495220/ae7cd72f-4c96-4875-aa73-3b79c78b9227.jpg);
}
/***** Modal *****/
.modal-backdrop { display: none; }
.modal-full {
    max-width: 1290px;
    width: 100%;
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 0 auto;
    background: rgba(0,0,0,.7);
}
.modal-backdrop.in {
    filter: alpha(opacity=7);
    opacity: 0.7;
}
.modal-content {
    background: none;
    border: 0;
    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
.modal-body {
    padding: 0 25px 25px 25px;
}
.modal-header {
    padding: 30px 25px 10px 25px;
    text-align: right;
}
.modal-header, .modal-footer {
    border: 0;
}
.modal-header .close {
    float: none;
    margin: 0;
    font-size: 36px;
    color: #fff;
    font-weight: 300;
    text-shadow: none;
    opacity: 1;
}
</style>
<div id="overlay1" class="modal" role="dialog">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
            <div class="modal-header text-right">
                <button id="close-button1" type="button" class="close" onclick="startoverlay1()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe id="video1" class="embed-responsive-item" enablejsapi="1" src="https://www.youtube.com/embed/X_WhDt18-2E?enablejsapi=1&amp;controls=2modestbranding=1&amp;color=white&amp;showinfo=0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="overlay2" class="modal" role="dialog">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
            <div class="modal-header text-right">
                <button id="close-button2" type="button" class="close" onclick="startoverlay2()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe id="video2" class="embed-responsive-item" enablejsapi="1" src="https://www.youtube.com/embed/VNQZ2mPzhcA?enablejsapi=1&amp;controls=2modestbranding=1&amp;color=white&amp;showinfo=0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modal-backdrop" class="modal-backdrop fade in"></div>

Example of multiple modal windows with more than one YouTube video.

You must include:

The startoverlay onclick must be unique by adding a number i.e. startoverlay1.
The data-target for the link must be unique by adding a number i.e. #overlay1.
In the JavaScript, the var for each video player must be unique by adding a number i.e. var player1.
In the JavaScript, the video ID must be unique by adding a number i.e. video1 and match the ID on the embedded iframe.
In the JavaScript, the var for close button must be unique by adding a number i.e. pauseButton1 and a unique ID that matches the close button, i.e. close-button1.
The id="close-button" on the button. This must unique by adding a number to the id i.e. id="close-button1".
The id="video(number)" on the iframe. This must unique by adding a number to the id i.e. id="video1".
JavaScript to open and close modal
JavaScript to stop video playing when closed
CSS to style modal. (CSS not in standard.css as of 13 April 2018)

This example uses tiled image panels but you can use any design to trigger the modal window.

The element that serves as the dialog container should have a role of dialog.

The dialog has either an aria-labelledby property set to refer to the visible dialog title or a label specified with aria-label.

The close button should have an aria-label e.g. aria-label="Close".

View the WAI-ARIA practices documentation for more information.

Top of page

Changelog

Added	Updates	Current version	Accessibility	Status
14 December 2016	1 August 2019	1.1.0	Needs review	Current

Top of page