Skip links and keyboard navigation

SWE components

Video

On this page

Overview

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

Youtube video

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="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>
Last updated:
28 June 2024