{%- assign langs = site.data.lang -%} <div class=“video-container” data-video-type=“” dir=“ltr”>

<video preload="metadata" data-youtube-id="{{include.yt-id}}" data-youtube-nocookie="true" data-description-audible="false" width="450">
  {%- assign captions = include.captions | split: ',' -%}
  {%- for caption in captions -%}
    {%- assign c = caption | split: '|' -%}
    {%- assign clangcode = c[1] -%}
    {%- assign l = langs[clangcode].nativeName -%}
    <track src="{{ include.path | append: c[0] | relative_url }}" label="{{l}}" kind="captions" srclang="{{c[1]}}" {% if c[2] == "default" %}default{% endif %}>
  {%- endfor -%}
  {%- assign subtitles = include.subtitles | split: ',' -%}
    {%- for subtitle in subtitles -%}
      {%- assign s = subtitle | split: '|' -%}
      {%- assign slangcode = s[1] -%}
      {%- assign l = langs[slangcode].nativeName -%}
      <track src="{{ include.path | append: s[0] | relative_url }}" label="{{l}}" kind="subtitles" srclang="{{s[1]}}" {% if s[2] == "default" %}default{% endif %}>
    {%- endfor -%}
  {%- assign descriptions = include.descriptions | split: ',' -%}
    {%- for desc in descriptions -%}
      {%- assign d = desc | split: '|' -%}
      {%- assign dlangcode = d[1] -%}
      {%- assign l = langs[dlangcode].nativeName -%}
      <track src="{{ include.path | append: d[0] | relative_url }}" label="{{l}}" kind="descriptions" srclang="{{d[1]}}" {% if d[2] == "default" %}default{% endif %}>
    {%- endfor -%}
</video>

</div> {% if include.yt-id-ad %} <div class=“video-container” data-video-type=“audio-described”>

<video preload="metadata" data-youtube-id="{{include.yt-id-ad}}" data-youtube-nocookie="true" data-description-audible="false" width="450">
  {%- assign captions = include.captions-ad | split: ',' -%}
  {%- for caption in captions -%}
    {%- assign c = caption | split: '|' -%}
    {%- assign clangcode = c[1] -%}
    {%- assign l = langs[clangcode].nativeName -%}
    <track src="{{ include.path | append: c[0] | relative_url }}" label="{{l}}" kind="captions" srclang="{{c[1]}}" {% if c[2] == "default" %}default{% endif %}>
  {%- endfor -%}
  {%- assign subtitles = include.subtitles-ad | split: ',' -%}
    {%- for subtitle in subtitles -%}
      {%- assign s = subtitle | split: '|' -%}
      {%- assign slangcode = s[1] -%}
      {%- assign l = langs[slangcode].nativeName -%}
      <track src="{{ include.path | append: s[0] | relative_url }}" label="{{l}}" kind="subtitles" srclang="{{s[1]}}"  {% if s[2] == "default" %}default{% endif %}>
    {%- endfor -%}
  {%- assign descriptions = include.descriptions-ad | split: ',' -%}
    {%- for desc in descriptions -%}
      {%- assign d = desc | split: '|' -%}
      {%- assign dlangcode = d[1] -%}
      {%- assign l = langs[dlangcode].nativeName -%}
      <track src="{{ include.path | append: d[0] | relative_url }}" label="{{l}}" kind="descriptions" srclang="{{d[1]}}"  {% if d[2] == "default" %}default{% endif %}>
    {%- endfor -%}
</video>

</div> <p><button id=“audio_description_button”><svg aria-hidden=“true” class=“icon-audio-description ”><use xhref=“{{ ”/assets/images/icons.svg#icon-audio-description“ | relative_url }}”></use></svg> <span>Enable Audio Description</span></button></p> {% endif %}

<script src=“{{ ”/assets/ableplayer/thirdparty/modernizr.custom.js“ | relative_url }}”></script> <script src=“{{ ”/assets/scripts/jquery.min.js“ | relative_url }}”></script> <script src=“{{ ”/assets/ableplayer/thirdparty/js.cookie.js“ | relative_url }}”></script> <script src=“{{ ”/assets/ableplayer/build/ableplayer.min.js“ | relative_url }}”></script> <script>

var youTubeDataAPIKey = "{{site.ytkey}}";
var googleApiReady = false;
function initGoogleClientApi() {
  googleApiReady = true;
}

</script> <script src=“//apis.google.com/js/client.js?onload=initGoogleClientApi”></script>

<script> (function () {

'use strict';

var player1 = new AblePlayer($('[data-video-type=""] video'));
var player2 = new AblePlayer($('[data-video-type="audio-described"] video'));

function addclass(el, className) {
  if (el.classList) {
    el.classList.add(className);
  } else {
    if(! hasclass(el, className)){
      el.className += ' ' + className;
    }
  }
}

function removeclass(el, className) {
  if (el.classList) {
    el.classList.remove(className);
  } else {
    el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
  }
}

function hasclass(el, className) {
  if (el.classList) {
    return el.classList.contains(className);
  } else {
    return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
  }
}

var audiodescribed = document.querySelectorAll('[data-video-type="audio-described"]');

if (audiodescribed) {

Array.prototype.forEach.call(audiodescribed, function(el, i){
  el.setAttribute('hidden', true);
});

var adbutton = document.querySelector('#audio_description_button');
adbutton.addEventListener('click', function(e){
  player1.pauseMedia();
  player2.pauseMedia();
  if (e.target.getAttribute('data-status') == "audio-described") {
    var videos = document.querySelectorAll('.video-container');
    Array.prototype.forEach.call(videos, function(el, i){
      el.removeAttribute("hidden");
    });
    var nonaudiodescribed = document.querySelectorAll('[data-video-type="audio-described"]');
    Array.prototype.forEach.call(nonaudiodescribed, function(el, i){
      el.setAttribute('hidden', true);
    });
    e.target.setAttribute('data-status', 'non-audio-described');
    e.target.querySelector('span').innerHTML = 'Enable Audio Description';
  } else {
    var videos = document.querySelectorAll('.video-container');
    Array.prototype.forEach.call(videos, function(el, i){
      el.setAttribute('hidden', true);
    });
    var nonaudiodescribed = document.querySelectorAll('[data-video-type="audio-described"]');
    Array.prototype.forEach.call(nonaudiodescribed, function(el, i){
      el.removeAttribute("hidden");
    });
    e.target.setAttribute('data-status', 'audio-described');
    e.target.querySelector('span').innerHTML = 'Disable Audio Description';
  }
});

}

}()); </script>