Media

All media components need to be wrapped in a div with the class cmp-video in order to be responsive. If this wrapper is not added manually then it will be added via Javascript once the page loads.

YouTube Video Embed

All iframes require a title attribute for screen reader accessibility. YouTube does not provide a title in their embed codes so a descriptive title will have to be added.

View

HTML

<div class="cmp-video">
  <iframe class="cmp-video__embed" width="560" height="315" src="https://www.youtube.com/embed/NYIMja4Hezg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="Commit to Georgia" allowfullscreen></iframe>
</div>

YouTube Video Embed with Caption

A caption can be added to videos by wrapping the iframe in a figure and using a figcaption.

View

Direct Link: Commit to Georgia

HTML

<figure>
  <div class="cmp-video">
    <iframe class="cmp-video__embed" width="560" height="315" src="https://www.youtube.com/embed/NYIMja4Hezg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="Commit to Georgia" allowfullscreen></iframe>
  </div>

  <figcaption>Direct Link: <a href="https://www.youtube.com/watch?v=NYIMja4Hezg" target="_blank" rel="noopener">Commit to Georgia</a>
  </figcaption>
</figure>

Kaltura iFrame Embed

View

HTML

<div class="cmp-video">
  <iframe id="kaltura_player_1574196844" title="Demo Kaltura Video" src="https://cdnapisec.kaltura.com/p/1727411/sp/172741100/embedIframeJs/uiconf_id/40170611/partner_id/1727411?iframeembed=true&playerId=kaltura_player_1574196844&entry_id=1_0qnl7gq8" class="cmp-video__embed" width="560" height="315" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *; picture-in-picture; gyroscope" frameborder="0" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
    <span itemprop="name" content="Demo Kaltura Video"></span>
    <span itemprop="description" content="Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies ultrices, commodo scelerisque sociis facilisis nam sem sociosqu vel, taciti odio ante libero per in mus fringilla."></span>
    <span itemprop="duration" content="222"></span>
    <span itemprop="thumbnailUrl" content="https://cfvod.kaltura.com/p/1727411/sp/172741100/thumbnail/entry_id/1_0qnl7gq8/version/100011"></span>
    <span itemprop="uploadDate" content="2019-11-19T19:39:48.000Z"></span>
    <span itemprop="width" content="560"></span>
    <span itemprop="height" content="315"></span>
  </iframe>
</div>

Kaltura Thumbnail Embed

View

HTML

<div class="cmp-video">
  <script src="https://cdnapisec.kaltura.com/p/1727411/sp/172741100/embedIframeJs/uiconf_id/40170611/partner_id/1727411"></script>
  <div id="kaltura_player_1574196903" class="cmp-video__embed cmp-video__embed--dynamic" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
    <span itemprop="class" content="cmp-video"></span>
    <span itemprop="name" content="Demo Kaltura Video"></span>
    <span itemprop="description" content="Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies ultrices, commodo scelerisque sociis facilisis nam sem sociosqu vel, taciti odio ante libero per in mus fringilla."></span>
    <span itemprop="duration" content="222"></span>
    <span itemprop="thumbnailUrl" content="https://cfvod.kaltura.com/p/1727411/sp/172741100/thumbnail/entry_id/1_ya0b9bsj/version/100011"></span>
    <span itemprop="uploadDate" content="2019-11-19T19:39:48.000Z"></span>
    <span itemprop="width" content="560"></span>
    <span itemprop="height" content="315"></span>
  </div>
  <script>
    kWidget.thumbEmbed({
      "targetId": "kaltura_player_1574196903",
      "wid": "_1727411",
      "uiconf_id": 40170611,
      "flashvars": {},
      "cache_st": 1574196903,
      "entry_id": "1_ya0b9bsj"
    });
  </script>
</div>