Video

This pattern is for embedding a YouTube video with an optional text label. The alternate featured media pattern may be used for videos on a full width page layout.

Rules for using videos

A title attribute for the <iframe> must be provided to make the video accessible to users of screen reader software. Including the text '(Video)' at the end of the title helps to identify the type of content when read out.
For pre-recorded videos a transcript must be provided to make the content of the video accessible.
Captions should be included in all videos. Automatically generated captions often need edited and are not as accurate as those written specifically.
A label <figcaption> may be included to add context to the video.

More information on video transcripts and captions is described within caption standards.

Video

This example contains no dialogue so a transcript is not required.

Example

Code

<!-- Begin pattern: image //-->
<figure>    
    <div class='embed-responsive embed-responsive-16by9 youtube-embed'><iframe title='St Andrews from above (video)' src='https://www.youtube.com/embed/pscNTzAGVnk' allowfullscreen=''></iframe></div>
</figure>
<!-- End pattern: image //-->

Video with transcript

This example includes a transcript to provide accessible alternative content.

Example

Video transcript

[MUSIC]

Student Services are here to support you throughout your time at University of St Andrews.

>> LARA: I'm Dr Lara Mesichke and I'm the director of Student Services. We're here to support you from the moment you become a student at the University of St Andrews. Student services provides a wide range of support for students when life or health affect their studies.

The advice and support centre is the information point for any queries, signposting to helpful resources or booking appointments with our team.

Our wellbeing, counselling, and mental health service has been accredited by the Royal College of Psychiatrists in association with the British Psychological Society pronouncing our service as safe, well-lead, effective, caring, and responsive to people's needs. Contact the wellbeing, counselling and mental health service support.advice@st-andrews.ac.uk.

We offer one-to-one or group support. We also work with students wanting to develop their individual strengths through coaching sessions.

Our disability team work with students to ensure that the appropriate support is in place. Whether that's in the classroom or whether it's in the University residences. Contact the disability team disability@st-andrews.ac.uk.

For queries when applying for your visa, our international team are available to assist.

Our money team are here to help you make the most of your money or explore options if you're experiencing financial need. Contact the money team moneyadvice@st-andrews.ac.uk.

The student health hub, located in the St Andrews Community Hospital, helps students access the excellent NHS health care and other services should they need them.

Our wardens live and work in the University residences, providing support and developing these individual communities.

We've been operating online since lockdown began and as many students told us that they preferred this we will continue to offer online appointments alongside face to face. All students will complete an online induction module, this will be the central place for key information and support as you transition to St Andrews. The University of St Andrews takes a whole institution approach to wellbeing and mental health with many staff and students providing advice and support throughout our whole community.

[MUSIC]

Code

<!-- Begin pattern: image //-->
<figure>    
    <div class='embed-responsive embed-responsive-16by9 youtube-embed'><iframe title='Student Services at University of St Andrews (video)' src='https://www.youtube.com/embed/6lrQJAv5U7I' allowfullscreen=''></iframe></div>
    <!-- Begin pattern: accordion //-->
    <div class="accordion-item">
        <div class="accordion-item__toggle">
            <div class="accordion-item__toggle-title">
                <button class="accordion-item__toggle-button" aria-expanded="false">Video transcript</button>
            </div>
        </div>
        <div class="accordion-item__content" aria-hidden="true"><p>[MUSIC]</p>
<p>Student Services are here to support you throughout your time at University of St Andrews.</p>
<p>>> LARA: I'm Dr Lara Mesichke and I'm the director of Student Services. We're here to support you from the moment you become a student at the University of St Andrews. Student services provides a wide range of support for students when life or health affect their studies.</p>
<p>The <a href="https://www.st-andrews.ac.uk/students/advice/">advice and support centre</a> is the information point for any queries, signposting to helpful resources or booking appointments with our team.</p>
<p>Our wellbeing, counselling, and mental health service has been accredited by the Royal College of Psychiatrists in association with the British Psychological Society pronouncing our service as safe, well-lead, effective, caring, and responsive to people's needs. Contact the wellbeing, counselling and mental health service <a href="mailto:support.advice@st-andrews.ac.uk">support.advice@st-andrews.ac.uk</a>.</p>
<p>We offer one-to-one or group support. We also work with students wanting to develop their individual strengths through coaching sessions.</p>
<p>Our disability team work with students to ensure that the appropriate support is in place. Whether that's in the classroom or whether it's in the University residences. Contact the disability team <a href="mailto:disability@st-andrews.ac.uk">disability@st-andrews.ac.uk</a>.</p>
<p>For queries when applying for your visa, our international team are available to assist.</p>
<p>Our money team are here to help you make the most of your money or explore options if you're experiencing financial need. Contact the money team <a href="mailto:moneyadvice@st-andrews.ac.uk">moneyadvice@st-andrews.ac.uk</a>.</p>
<p>The <a href="https://www.st-andrews.ac.uk/students/advice/health/">student health hub</a>, located in the St Andrews Community Hospital, helps students access the excellent NHS health care and other services should they need them.</p>
<p><a href="https://www.st-andrews.ac.uk/study/accommodation/halls/living/wardens/">Our wardens</a> live and work in the University residences, providing support and developing these individual communities.</p>
<p>We've been operating online since lockdown began and as many students told us that they preferred this we will continue to offer online appointments alongside face to face. All students will complete an online induction module, this will be the central place for key information and support as you transition to St Andrews. The University of St Andrews takes a whole institution approach to wellbeing and mental health with many staff and students providing advice and support throughout our whole community.</p>
<p>[MUSIC]</p>
        </div>
       </div>
    <!-- End pattern: accordion //-->
</figure>
<!-- End pattern: image //-->

Video with transcript and label

This example shows a video with text label and transcript.

Example

An introduction to the support provided by Student Services.

Video transcript

[MUSIC]

Student Services are here to support you throughout your time at University of St Andrews.

The advice and support centre is the information point for any queries, signposting to helpful resources or booking appointments with our team.

We offer one-to-one or group support. We also work with students wanting to develop their individual strengths through coaching sessions.

For queries when applying for your visa, our international team are available to assist.

Our money team are here to help you make the most of your money or explore options if you're experiencing financial need. Contact the money team moneyadvice@st-andrews.ac.uk.

The student health hub, located in the St Andrews Community Hospital, helps students access the excellent NHS health care and other services should they need them.

Our wardens live and work in the University residences, providing support and developing these individual communities.

[MUSIC]

Code

<!-- Begin pattern: image //-->
<figure>    
    <div class='embed-responsive embed-responsive-16by9 youtube-embed'><iframe title='Student Services at University of St Andrews (video)' src='https://www.youtube.com/embed/6lrQJAv5U7I' allowfullscreen=''></iframe></div>
    <figcaption>An introduction to the support provided by Student Services.</figcaption>
    <!-- Begin pattern: accordion //-->
    <div class="accordion-item">
        <div class="accordion-item__toggle">
            <div class="accordion-item__toggle-title">
                <button class="accordion-item__toggle-button" aria-expanded="false">Video transcript</button>
            </div>
        </div>
        <div class="accordion-item__content" aria-hidden="true"><p>[MUSIC]</p>
<p>Student Services are here to support you throughout your time at University of St Andrews.</p>
<p>>> LARA: I'm Dr Lara Mesichke and I'm the director of Student Services. We're here to support you from the moment you become a student at the University of St Andrews. Student services provides a wide range of support for students when life or health affect their studies.</p>
<p>The <a href="https://www.st-andrews.ac.uk/students/advice/">advice and support centre</a> is the information point for any queries, signposting to helpful resources or booking appointments with our team.</p>
<p>Our wellbeing, counselling, and mental health service has been accredited by the Royal College of Psychiatrists in association with the British Psychological Society pronouncing our service as safe, well-lead, effective, caring, and responsive to people's needs. Contact the wellbeing, counselling and mental health service <a href="mailto:support.advice@st-andrews.ac.uk">support.advice@st-andrews.ac.uk</a>.</p>
<p>We offer one-to-one or group support. We also work with students wanting to develop their individual strengths through coaching sessions.</p>
<p>Our disability team work with students to ensure that the appropriate support is in place. Whether that's in the classroom or whether it's in the University residences. Contact the disability team <a href="mailto:disability@st-andrews.ac.uk">disability@st-andrews.ac.uk</a>.</p>
<p>For queries when applying for your visa, our international team are available to assist.</p>
<p>Our money team are here to help you make the most of your money or explore options if you're experiencing financial need. Contact the money team <a href="mailto:moneyadvice@st-andrews.ac.uk">moneyadvice@st-andrews.ac.uk</a>.</p>
<p>The <a href="https://www.st-andrews.ac.uk/students/advice/health/">student health hub</a>, located in the St Andrews Community Hospital, helps students access the excellent NHS health care and other services should they need them.</p>
<p><a href="https://www.st-andrews.ac.uk/study/accommodation/halls/living/wardens/">Our wardens</a> live and work in the University residences, providing support and developing these individual communities.</p>
<p>We've been operating online since lockdown began and as many students told us that they preferred this we will continue to offer online appointments alongside face to face. All students will complete an online induction module, this will be the central place for key information and support as you transition to St Andrews. The University of St Andrews takes a whole institution approach to wellbeing and mental health with many staff and students providing advice and support throughout our whole community.</p>
<p>[MUSIC]</p>
        </div>
       </div>
    <!-- End pattern: accordion //-->
</figure>
<!-- End pattern: image //-->