Cursore slick - Metti in pausa una clip YouTube quando il dispositivo di scorrimento passa al fotogramma successivo

Question

Uso il cursore slick come dispositivo di scorrimento di più gallerie e uno degli elementi è una clip di YouTube. Tutto funziona alla grande, tranne se un utente fa clic sulla diapositiva successiva o precedente che il video continua a riprodurre. Non riesco a trovare alcuna documentazione su come sospendere o interrompere automaticamente una clip di YouTube quando è fuori dal frame.

Answer 1

sto usando v1.5.9 chiazza di petrolio e per risolvere questo, Attualmente sto usando jquery.each a ciclo tra tutti gli iframe e chiedere a ciascuno di iframe di smettere di giocare dopo l'evento di scorrimento liscia afterChange è stata innescata.

Come fermare un iframe:

È possibile fare riferimento here per sapere come fermare/mettere in pausa un iframe youtube.

Slick Slider afterChange evento:

Si può andare a github di chiazza di petrolio-cursore per sapere di più sulle sue events/settings

Di seguito è riportato i miei codici di riferimento:

$('.hero-slider').on('init', function(event, slick){ 
    //init code goes here 
}).on('afterChange',function(e,o){ 
    //on change slide = do action 
    $('iframe').each(function(){ 
     $(this)[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');  
    }); 
}).slick(); 

p/s: ricorda enablejsapi del parametro iframe su youtube = 1:

<iframe src="https://www.youtube.com/embed/xxxxxx?autoplay=0&enablejsapi=1"></iframe>