Hola, estoy teniendo problemas para obtener un carrusel pulido (http://kenwheeler.github.io/slick/) para detener la reproducción automática cuando estoy usando un clip de youtube dentro del control deslizante ...

Alguien dijo que puedo usar onAfterChange pero aún no sé cómo apagar la reproducción automática cuando el video está encendido (tenga en cuenta que esto es cuando el mouse NO está en el video)

Aquí está el código que estoy usando, cualquier ayuda sería agradable :)

$("#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);
    }
}

});