I have created a image slider using Jquery Slick Slider, Its having youtube video clips as well. When page load youtube video is set to 1st slide of the slider and it is autoplay and starts playing. I want, when I change slider frame to next slide youtube video stops playing.
I look at other stackoverflow answers but can't find anything.
I tried this -
Here is my div structure-
<div id="mainSlider" class="box box-default">
<div class="sliderItem"><div class="playerID"><iframe width="100%" height="100%" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/VIDEO_ID?rel=0&autoplay=1&version=3&loop=1&playlist=VIDEO_ID&enablejsapi=1" id="player"></iframe></div></div>
<div class="sliderItem"><img src="" /></div>
<div class="sliderItem"><img src="" /></div>
<div class="sliderItem"><img src="" /></div>
</div>
I used JS -
$("#mainSlider").slick({
dots: true,
autoplay: false,
autoplaySpeed: 7000,
speed: 500,
pauseOnHover: true,
responsive: [
{
breakpoint: 1025,
settings: {
arrows: true,
dots: false
}
}
]
})
.on('afterChange', function( e, slick, currentSlide ) {
$('.bumper').css('display', 'block');
playpausevideo($currentSlide.eq(e).data('youtubeplayer'), 'pause')
});
Youtube JS -
function onYouTubeIframeAPIReady(){ // this function is called automatically when Youtube API is loaded (see: https://developers.google.com/youtube/iframe_api_reference)
jQuery(function($){ // when DOM has loaded
var $contentdivs = $('.sliderItem').find('div.playerID')
$contentdivs.each(function(i){ // loop through the content divs
var $contentdiv = $(this)
var $youtubeframe = $contentdiv.find('iframe[src*="youtube.com"]:eq(0)') // find Youtube iframe within DIV, if it exists
if ($youtubeframe.length == 1){
var player = new YT.Player($youtubeframe.get(0), { // instantiate a new Youtube API player on each Youtube iframe (its DOM object)
events: {
'onReady': function(e){e.target._donecheck=true} // indicate when video has done loading
}
})
$contentdiv.data("youtubeplayer", player) // store Youtube API player inside contentdiv object
}
})
})
}
function playpausevideo(player, action){
if (player && player._donecheck === true){
if (action == "play")
player.playVideo()
else if (action == "pause")
player.pauseVideo()
}
<script src="http://www.youtube.com/iframe_api"></script>
This code is not working and youtube video does not stops, Its still playing when slide change.
Any suggestions?
Thanks
Adding off of Sequence's answer, this will allow the slider to function even if there is more than one slider on the page.
$('.mainSlider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
var current = $(slick.$slides[currentSlide]);
current.html(current.html());
});
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