Slick-carousel how to stop autoplay when video is on via youtube api

Question

Hi i'm having trouble to get slick carousel (http://kenwheeler.github.io/slick/) to stop the autoplay when I'm using a youtube clip inside the slider..

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)

Here is the code I'm using any help would be nice :)

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

});

Answer 1

I found a solution to my problem:

function onPlayerReady() {
        $("#slide-video").on("click", function() {
            $(this).hover(function(){
                slider.slick('slickPause');
            });
            $(this).css('background','transparent');
            $("#player").show();
            player.playVideo();
        });
    }

    function onPlayerStateChange(event) {
        if(event.data === 0 || event.data === 2) {
            $(".countdown").fadeIn();
        }

        if(event.data === 1) {
            $(".countdown").fadeOut();
        }

        if( 1 === event.data || 2 === event.data || 3 === event.data) {
            slider.slick('slickPause');

        } else {
            slider.slick('slickPlay');
        }
    }

This worked on my end in chrome & Safari.. Firefox doesnt work on and IE I cant try since im not on a pc but on a MAC, but thats why i putted a hover function incase someone want to have the mouse there?

update: Okay it works now with all.. its just after you pause the video and then resume it AFTER the slider has gone once it will not use the slickPause function anymore.

Answer 2

The onAfterChange is a property of slick that can be passed in the plugin initiation.

/*  Slick slider init */
$("#slider").slick({ 
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  dots: true,
  autoplay: true,
  autoplaySpeed: 7000,
  infinite: true,
  onAfterChange : function() {
    player.stopVideo();
  }
});

EDIT

To stop the slider when the video starts, I guess looking at your code, here's what you could try:

function onPlayerReady() {
    $("#slide-video").on("click", function() {

        // pause the slider
        $('#slider').slick('slickPause');

        $(this).css('background','transparent');
        $("#player").show();
        player.playVideo();
    });
}