Slick-carousel, how to stop autoplay when the video is enabled via youtube api

Question

Hi, I am having trouble getting a carousel ( http://kenwheeler.imtqy.com/slick/ ) to stop auto playback when I use the YouTube slider clip ..

Someone said that I can use onAfterChange, but still don’t know how to turn off auto playback when the video is on (remember that this is when the mouse is NOT on the video)

Here is the code that I use 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 at my end in chrome and Safari .. Firefox does not work, and IE I can’t try, since im not on the computer, but on the MAC, but that’s why I put the freeze function if someone wants the mouse there

update: Well, now it works with everyone .. its right after the video is paused, and then resume it AFTER the slider is gone, as soon as it no longer uses the slickPause function.

Answer 2

onAfterChange - slick property that can be passed in the initiation of the plugin.

 /* 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 starting the video, I think looking at your code, here is 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(); }); }