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);
    }
}

});

Shamefaced

I have added new answer here: #47301932 – Preparator

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.

Shamefaced

Where is "slider" or "player" declared? – Break

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

Marissamarist

okay but can I hook the OnAfterChange like this? OnAfterChange : onPlayerStateChange ?? since its there the conditions are meet – Shamefaced

I think you need to make the player instance available globally through window.player then use the YouTube API to stop the video – Marissamarist

@user3383249 - I have updated my answer with an example of using the onAfterChange to stop the video – Marissamarist

Thanks :) will look in to it – Shamefaced

Oh @Filype I think you missunderstod me.. I meant the autoplay for slider not the video.. I want the autoplay on the slider to stop when video from youtube are playing – Shamefaced

@Tdservice, updated the answer, I guess you forgot to pause the carousel when the video starts playing? onPlayerReady – Marissamarist

yeah but it didnt work.. the autoplay still playing after the 7000(ms?) and is there a test way to see if $("#slider").slick('slickPause') have a effect or not? (exept to wait out the 7000) – Shamefaced

You can run this in the console. Might be worth posting a fiddler link – Marissamarist