Skip links and keyboard navigation

For government has transitioned to using the Queensland Government design system. If you have feedback, please use the form at the bottom of this page.

Learn more

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