Skip links and keyboard navigation

Restrictions on the installation and use of the artificial intelligence (AI) platform DeepSeek on government provided devices are now in place.

HHelp shape the For government website by joining our user research panel.

Video

Overview

Use this component to embed videos and to include a show/hide transcript feature.

Code

<section class="qg-video-wrapper mb-3">
    <h3 class="qg-video-title">Video title</h3>
    <p class="qg-video-description">Video description goes here.</p>
    <div class="qg-video-nav-container">
      <span title="Video duration" class="qg-video-duration-text">Duration 00:00:00</span>
      <span>|</span>
      <span aria-hidden="true" class="fa fa-cc" title="closed captions icon"><span class="sr-only">Closed captions icon:</span></span>
    </div>

    <div class="embed-responsive embed-responsive-16by9">
      <iframe title="YouTube video" class="embed-responsive-item" allowfullscreen src="https://www.youtube.com/embed/NpmB80pWUsk?rel=0"></iframe>
    </div>
</section>
<section class="qg-accordion qg-accordion-v2" aria-label="Show/hide transcript">
    <article>
      <button class="acc-heading qg-accordion--closed">
        <a class="qg-accordion--ga">
          <span class="accordion-label"><span class="title">Show/hide transcript</span></span>
        </a>
      </button>
      <div class="collapsing-section" id="id-panel-content-101102">
        <p>Transcript goes here.</p>
      </div>
    </article>
</section>

Vimeo video

For instructions on integrating Google Tag Manager with Vimeo videos please refer to https://vimeo.zendesk.com/hc/en-us/articles/115002859607-Integrating-with-Google-Tag-Manager

View example in Storybook

Code

<section class="qg-video-wrapper mb-3">
  <h3 class="qg-video-title">Video title</h3>
  <p class="qg-video-description">Video description goes here.</p>
  <div class="qg-video-nav-container">
    <span title="Video duration" class="qg-video-duration-text">Duration 00:00:00</span>
    <span>|</span>
    <span aria-hidden="true" class="fa fa-cc" title="closed captions icon"><span class="sr-only">Closed captions icon:</span></span>
  </div>
  <div class="embed-responsive embed-responsive-16by9">
    <iframe title="Vimeo video" class="embed-responsive-item" allowfullscreen="" src="https://player.vimeo.com/video/378428959?rel=0"></iframe>
  </div>
</section>
<section class="qg-accordion qg-accordion-v2 mb-3" aria-label="Show/hide transcript">
  <article>
    <button class="acc-heading qg-accordion--closed">
      <a class="qg-accordion--ga">
        <span class="accordion-label">
         <span class="title">Show/hide transcript</span>
        </span>
      </a>
    </button>
    <div class="collapsing-section" id="id-panel-content-250839">
      <p>Transcript goes here.</p>
    </div>
  </article>
</section>