Slick slider pause youtube video when slide change

Question

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 aut

Answer 1

I would reset the HTML content. It will kill the IFrame and rebuild it.

var slider =  $('.mainSlider').slick({
    slidesToShow: 1,
    autoplay: false,
    autoplaySpeed: 5000
});

slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
    var current = $('.slick-current');
    current.html(current.html());
});

Answer 2

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());
});

Answer 3

Check the simplest way, Current slide iframe src reset:

$('.mainSlider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
       $('.slick-current iframe').attr('src', $('.slick-current iframe').attr('src'));
});