Slick Slider with Video

A Base fiddle for use in the issue section of github https://github.com/kenwheeler/slick/issues

HTML

<script src="//vjs.zencdn.net/4.9.0/video.js"></script>
<link rel="stylesheet" href="//vjs.zencdn.net/4.9.0/video-js.css">
<script src="//pupunzi.com/mb.components/mb.YTPlayer/demo/inc/jquery.mb.YTPlayer.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick-theme.css">
<div class="main-slider" id="main-slider">
            <div>
                <div class="video-wrapper">
                    <iframe src="https://www.youtube.com/embed/lqj-QNYsZFk?controls=1">
                                </iframe>

                </div>
            </div>
            <div>
                <div class="video-wrapper">
                    <iframe src="https://www.youtube.com/embed/lqj-QNYsZFk?controls=1">
                                </iframe>

                </div>
            </div>          
        </div>

CSS

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

JavaScript

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