I’m using slick slider as a multiple gallery slider and one of the items is a YouTube clip. Everything works great, except if a user clicks on the next or previous slide the video keeps playing. I can’t seem to find any documentation on how to automatically pause or stop a YouTube clip when it’s out of frame.
I'm using slick v1.5.9 and to solve this, I'm currently using jquery .each
to loop through all the iframes and ask each of the iframe to stop playing after slick slider's afterChange
event was triggered.
How to stop an iframe :
You can refer here to know how to stop/pause an youtube iframe.
Slick Slider's afterChange
event :
You can go to slick-slider's github to know more about its events/settings
Below is my codes for reference :
$('.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: remember your youtube iframe's parameter's enablejsapi=1 :
<iframe src="https://www.youtube.com/embed/xxxxxx?autoplay=0&enablejsapi=1"></iframe>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With