Slick Carousel : Pause the Slick autoplay when youtube video is playing

I am using http://kenwheeler.github.io/slick/ for the carousal. But the problem is the autoplay slides the slick to next even when the youtube video is playing.

JSFIDDLE

Currently I am using the below JS but nothing seems to work on it.

$('#main-slider').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 3000,
      dots: true,
      infinite: true,
      adaptiveHeight: true,
      arrows: false
  });

  var video = $('#main-slider .slick-active').find('iframe').get(0).play();

  $('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
    $('#main-slider .slick-slide').find('video').get(0).pause();
    var video = $('#main-slider .slick-active').find('video').get(0).play();
});

There are few similar question but none of them has a solution. Slick-carousel how to stop autoplay when video is on via youtube api