title: Slick-carousel how to stop autoplay when video is on via youtube api
body: <p>Hi i'm having trouble to get slick carousel (<a href="http://kenwheeler.github.io/slick/" rel="nofollow">http://kenwheeler.github.io/slick/</a>) to stop the autoplay when I'm using a youtube clip inside the slider.. </p>
  
  <p>Someone said that I can use onAfterChange but still dont know how to turn off the autoplay when video is on (mind that this is when mouse in NOT on the video) </p>
  
  <p>Here is the code I'm using any help would be nice :)</p>
  
  <pre><code>$("#slider").slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      dots: true,
      autoplay: true,
      autoplaySpeed: 7000,
      infinite: true
  });
  
  /* **************************************** *
   * Youtube API
   * Create player
   * **************************************** */
  var player;
  window.onYouTubePlayerAPIReady = function() {
  
      $("#player").hide();
      var player_id   = 'player';
      var $player     = jQuery('#'+player_id);
      var parent      = $player.parent();
  
      player = new YT.Player(player_id, {
          videoId: 'HevnOuJY1TM',
          height: parent.height(),
          width: '100%',
          playerVars: {
              'autoplay': 0,
              'controls': 0,
              'rel' : 0,
              'disablekb' : 0,
              'modestbranding' : 1,
              'showinfo': 0,
              'html5': 1
          },
          events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
          }
  
  
      });
  
      var sizeVideo = _.debounce(function() {
  
          player.setSize('100%', parent.height());
  
      }, 500);
  
      jQuery(window).on('load resize', sizeVideo);
  
      jQuery(window).trigger('resize');
  };
  
  function onPlayerReady() {
      $("#slide-video").on("click", function() {
          $(this).css('background','transparent');
          $("#player").show();
          player.playVideo();
      });
  }
  
  function onPlayerStateChange(event) {
  
      if(event.data === 0) {
          $(".countdown").fadeIn();
      }
  
      if(event.data === 1) {
          $(".countdown").fadeOut();
      }
  
      if(event.data === 2) {
          $(".countdown").fadeIn();
      }
  
      if( 1 === event || 2 === event || 3 === event) {
          $('#slider')
              .slick('slickPause')
              .slick('slickSetOption', 'autoplay', false, true);
      } else {
          $('#slider').slick('slickPlay')
              .slick('slickSetOption', 'autoplay', true, true);
      }
  }
  
  });
  </code></pre>