slickjs: Carousel with thumbs, `pauseVideo` on slide change

slickjs.js

// virtual map: handle playing of slickjs videos when slides change

// slickjs: main
$('.slickjs-media').slick({
  accessibility: true,
  focusOnSelect: true,
  pauseOnFocus: true,
  pauseOnHover: true,
  arrows: false,
  fade: true,
  dots: false,
  cssEase: 'ease',
  autoplay: false,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  asNavFor: '.slickjs-media-thumbs'
});

// slickjs: thumbs
$('.slickjs-media-thumbs').slick({
  asNavFor: '.slickjs-media',
  slidesToShow: 3,
  slidesToScroll: 1,
  dots: true,
  vertical: true,
  centerMode: false,
  focusOnSelect: true
});

// slickjs: `onbeforeChange`
$('.slickjs-media').on('beforeChange', function(event, slick) {
  var currentSlide, slideType, player, command;

  currentSlide = $(slick.$slider).find('.slick-current');
  slideType = currentSlide.attr("class").split(' ')[1];
  player = currentSlide.find('iframe').get(0);
  command = {
    'event': 'command',
    'func': 'pauseVideo'
  };

  if (player != undefined) {
    player.contentWindow.postMessage(JSON.stringify(command), '*');
  }
});

//run the fitVids jQuery plugin to ensure the iframes stay within the item.
//$('.iframe-container').fitVids();

youtube.html

<div class="slickjs-media">
  
  <!-- repeat -->
  <div class="media-item video">
    <h2>Youtube video name</h2>
    <div class="iframe-container">
      <iframe class="yt-player" width="100%" height="100%" src="https://www.youtube.com/embed/{% YouTubeVideoID %}?rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <!-- end repeat -->
  
</div>