Slick Carousel: Pause Slick autostart when playing YouTube videos

Question

I am using http://kenwheeler.imtqy.com/slick/ for a carousel. But the problem is that auto play speeds up the slide to the next, even when playing YouTube videos.

JSFIDDLE

I am currently using below JS, but nothing works on it.

$('#main-slider').slick({ slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 3000, dots: true, infinite: true, adaptiveHeight: true, arrows: false }); var video = $('#main-slider .slick-active').find('iframe').get(0).play(); $('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){ $('#main-slider .slick-slide').find('video').get(0).pause(); var video = $('#main-slider .slick-active').find('video').get(0).play(); }); 

There are several similar issues, but none of them has a solution. Slick-carousel how to stop auto play when video is enabled via aptube api

Answer 1

using slick and videojs together are complex, there are too many errors (an event / condition that we need to handle manually), especially using youtube as a source.

I will explain how to do this inside the code: fiddle

 $(function(){ var videoPlayed = false; function pauseSlider(){ myslider.slick('slickPause'); } function playSlider(){ myslider.slick('slickPlay'); } /* assign videojs handle on pause and play dinamically. place this script before slick initialize only. because slick will cloned our element, so we will confuse to assign event handle on our videjs element but if you want it you change selector from `.video-slider` to `"#main-slider .slick-slide:not(.slick-cloned) .video-slider"` */ //$("#main-slider .slick-slide:not(.slick-cloned) .video-slider").each(function(i,e){ $(".video-slider").each(function(i,e){ var id=$(this).attr('id'); videojs.players[id].on("pause", function(){ videoPlayed= false; playSlider(); }); videojs.players[id].on("play", function(){ pauseSlider(); videoPlayed= true; }); }); var myslider = $('#main-slider').slick({ slidesToShow: 1, slidesToScroll: 1, /* when video play, slider is stopped. but when event mouseout (hover out)/focus out triggered, the slider will contine to play again. this is because pauseOnHover and pauseOnFocus default true. And because you want adaptiveHeight (full screen slider), i assume you no need to doing pauseOnHover, because all time mouse will stay inside your slider. in this case we need to change pauseOnHover and pauseOnFocus to false */ pauseOnHover:false, pauseOnFocus:false, autoplay: true, autoplaySpeed: 3000, dots: true, infinite: true, adaptiveHeight: true, arrows: false }); $('.video-slider').click(function(){ if(videoPlayed){ /* actually this is will never executed. but sometimes this will execute if user spam play pause on slow network. so we still leave here to handle if videojs pause event not called. */ videojs($(this).attr('id')).pause();//pause video 1st then play the slider videoPlayed= false; playSlider(); }else{ pauseSlider();//pause slider 1st then play the video videojs($(this).attr('id')).play(); videoPlayed= true; } }); }); 

Answer 2

Here you will find a solution:

Fiddle: http://jsfiddle.net/rijokpaul/pyzpg7st/2/

I solved it using YouTube iframe API

  var tag = document.createElement('script'); tag.id = 'iframe-demo'; tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { var elems1 = document.getElementsByClassName('yt-player'); for(var i = 0; i < elems1.length; i++) { player = new YT.Player(elems1[i], { events: { //'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } } function onPlayerReady(event) { } function handleVideo(playerStatus) { if (playerStatus == -1) { // unstarted $('#main-slider').slick('slickPause'); } else if (playerStatus == 0) { // ended $('#main-slider').slick('slickPlay'); } else if (playerStatus == 1) { // playing = green $('#main-slider').slick('slickPause'); } else if (playerStatus == 2) { // paused = red $('#main-slider').slick('slickPlay'); } else if (playerStatus == 3) { // buffering = purple } else if (playerStatus == 5) { // video cued } } function onPlayerStateChange(event) { handleVideo(event.data); } $(function() { $('#main-slider').slick({ slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 3000, pauseOnFocus: false, pauseOnHover: false, dots: true, infinite: true, adaptiveHeight: true, arrows: false }); }); $('#main-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){ $('.yt-player').each(function(){ this.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*') }); }); 

An iframe is also updated as shown below.

 <iframe class="yt-player" src="https://www.youtube.com/embed/lqj-QNYsZFk?controls=1&rel=0&enablejsapi=1"></iframe> 

Added &enablejsapi=1 at the end of the iframe url and used a class called yt-player .

UPDATE

Comments onReady function and uses the slick beforeChange event to pause the YouTube video when it is not active.

Answer 3

It worked for me. (This is not a Fiddle based fork or not that you shared in your question.)

Code:

[HTML]

 <div class="video-slider"> <div class="slider-item"> <!-- enablejsapi=1 must be in the src --> <iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/10r9ozshGVE?enablejsapi=1" frameborder="0"></iframe> </div> <div class="slider-item"> <!-- enablejsapi=1 must be in the src --> <iframe id="player2" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/fGPPfZIvtCw?enablejsapi=1" frameborder="0"></iframe> </div> </div> 

[Js]

 // Loads the IFrame Player API script asynchronously. ( function() { var tag = document.createElement( 'script' ), tag2 = document.getElementsByTagName( 'script' )[0]; tag.src = 'https://www.youtube.com/iframe_api'; tag2.parentNode.insertBefore( tag, tag2 ); } )(); jQuery( function( $ ) { // Set this to TRUE to resume the Slick autoplay once the video is paused. var resumeSlickOnVideoPause = true; function _onStateChange( e ) { var player = e.target, $slider; if ( YT.PlayerState.PLAYING === e.data || YT.PlayerState.BUFFERING === e.data ) { $slider = $( player.getIframe() ).closest( '.video-slider' ); if ( true !== $slider.data( '_resumeYtPlayer' ) ) { $slider.data( '_resumeYtPlayer', true ) // required .slick( 'slickPause' ); } } // Below 'else' is optional, and you may comment it out or just remove. else if ( YT.PlayerState.PAUSED === e.data && resumeSlickOnVideoPause ) { $slider = $( player.getIframe() ).closest( '.video-slider' ); if ( true === $slider.data( '_resumeYtPlayer' ) ) { $slider.removeData( '_resumeYtPlayer' ) // required .slick( 'slickPlay' ); } } // Below 'else' is required. else if ( YT.PlayerState.ENDED === e.data ) { $slider = $( player.getIframe() ).closest( '.video-slider' ); if ( true === $slider.data( '_resumeYtPlayer' ) ) { $slider.removeData( '_resumeYtPlayer' ); // required } } } function init() { $( 'iframe[id]', '.slider-item' ).each( function() { var id = $( this ).attr( 'id' ), player; if ( ! id ) { return; } try { player = new YT.Player( id ); } catch ( err ) { console.log( err ); return false; } window[ 'onStateChange_' + id ] = _onStateChange; player.addEventListener( 'onStateChange', 'onStateChange_' + id ); } ); } // Alternative to using onYouTubeIframeAPIReady(). ( function() { var delay = 100, // ms (milliseconds) max_time = 5000, // ms _elapsed = 0, // ms _timer; if ( 'object' === typeof YT && YT.Player ) { init(); return; } _timer = setInterval( function() { if ( _elapsed >= max_time ) { clearInterval( _timer ); return; } if ( 'object' === typeof YT && YT.Player ) { clearInterval( _timer ); init(); } _elapsed += delay; }, delay ); } )(); $( '.video-slider' ).slick( { autoplay: true, dots: true } ); } ); 

Add to head :

 <!-- Slick stylesheets. --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" /> 

Add to </body> :

 <!-- jQuery & Slick JS. --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>