Video - Astridd

Overview

This component gives you the ability to embed either a Wistia or YouTube video into your page. Wistia is the preferred hosting method as we are moving away from YouTube. Videos can be configured to auto-play on page load, or upon scrolling to that area of the page. They can also be set to play only upon activation by the user. Additionally, the Video can be placed within the modal.

Examples

Wistia variation

<div class="video" data-myob-video-wistia data-video-id="z8th6x33vk">
  <div class="wistia_embed wistia_async_z8th6x33vk seo=true videoFoam=true slientAutoPlay=true wmode=transparent">&nbsp;</div>
</div>

Youtube variation

This variation is to be deprecated and moved to an embed model

<div class="video" data-myob-video-youtube data-video-id="-cd6DIM-fQM">
  <div id="-cd6DIM-fQM"></div>
</div>

Square variation

<div class="video video--square" data-myob-video-wistia data-video-id="ixzmfjfsv3">
  <div class="wistia_embed wistia_async_ixzmfjfsv3 seo=true videoFoam=true slientAutoPlay=true wmode=transparent">&nbsp;</div>
</div>

Modal variation

Modal w. YouTube video Modal w. Wistia video

<!-- Trigger -->
<a class="btn btn--primary" data-open="modal-youtube">Modal w. YouTube video</a>
<!-- Modal -->
<div class="modal modal--md modal--media" id="modal-youtube" data-myob-modal>
  <div class="modal__head">
    <h4 class="modal__title">YouTube</h4>
    <button type="button" aria-label="Close" class="close" data-close>
      <svg aria-hidden="true" role="img" class="icon icon--cross icon--sm">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross"></use>
      </svg>
    </button>
  </div>
  <div class="modal__body">
    <div class="video" data-myob-video-youtube data-video-id="vuG_fe0HcnE">
      <div id="vuG_fe0HcnE"></div>
    </div>
  </div>
</div>

<!-- Trigger -->
<a class="btn btn--primary" data-open="modal-wistia">Modal w. Wistia video</a>
<!-- Modal -->
<div class="modal modal--md modal--media" id="modal-wistia" data-myob-modal>
  <div class="modal__head">
    <h4 class="modal__title">Wistia</h4>
    <button type="button" aria-label="Close" class="close" data-close>
      <svg aria-hidden="true" role="img" class="icon icon--cross icon--sm">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross"></use>
      </svg>
    </button>
  </div>
  <div class="modal__body">
    <div class="video" data-myob-video-wistia data-video-id="2mur6m7rq3">
      <div class="wistia_embed wistia_async_2mur6m7rq3 seo=true videoFoam=true autoPlay=false"></div>
    </div>
  </div>
</div>

Usage guidelines

Dos	Donts
To adhere to accessibility best practices, do provide a closed caption transcript where possible.	Avoid configuring the video to auto-play, unless in specific circumstances, as it can create an unpleasant user experience.
Do choose a suitable frame for your preview state.

Implementation guidelines

Name	Class	Attribute	Description
Aspect ratio	`.video--square`		Change the aspect ratio of the Video. Default is 16:9.
Autoplay		`?video-auto-play=`	Autoplay a video on page load. Append this query parameter with the Video `ID` to the end of the URL. Can be used in conjunction with auto open Modals and seek to Videos.
Seek to		`?video-seek-to=`	Seek to a specific point in a video on page load. Append this query parameter with the Video `ID` and seek to time to the end of the URL. Accepts multiple Video `ID`s, seperated by commas, e.g. `?video-seek-to= VIDEO_ID:SEEK_TIME, VIDEO_ID:SEEK_TIME`. Can be used in conjunction with autoplay Videos.
Autoplay on screen enter	`.waypoint`		Autoplay a video on scroll to position and Video entres the window. Apply to containing element.