Slick Slider with Video

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

HTML

<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">
<script src="https://vjs.zencdn.net/6.6.3/video.js"></script>
<link rel="stylesheet" href="https://vjs.zencdn.net/6.6.3/video-js.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.4.1/Youtube.min.js"></script>
<div class="main-slider" id="main-slider">
			<div>
				<div class="video-wrapper">
					<video
						id="vid1"
						class="video-js vjs-default-skin  video-slider"
						controls
						width="640" 
						data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/embed/lqj-QNYsZFk"}] }'
					>
					</video>
				</div>
			</div>
			<div>
				<div class="video-wrapper">
					<video
						id="vid2"
						class="video-js vjs-default-skin  video-slider"
						controls
						width="640" 
						data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/embed/xjS6SftYQaQ"}] }'
					>
					</video>
				</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

$(function(){
				var videoPlayed = false;
				
				function pauseSlider(){
					myslider.slick('slickPause');
				} 
				
				function playSlider(){
					myslider.slick('slickPlay');
				}
				
				/*
					assign videojs handle on pause and play dinamically.
					place this script before slick initialize only.
					because slick will cloned our element, so we will confuse to assign event handle on our videjs element
					
					but if you want it you change selector from `.video-slider` to `"#main-slider .slick-slide:not(.slick-cloned) .video-slider"`
				*/
				//$("#main-slider .slick-slide:not(.slick-cloned) .video-slider").each(function(i,e){
				$(".video-slider").each(function(i,e){
					var id=$(this).attr('id');
					videojs.players[id].on("pause", function(){
						videoPlayed= false;
						playSlider();
					});
					videojs.players[id].on("play", function(){
						pauseSlider();
						videoPlayed= true;
					});
				});
				
				var myslider = $('#main-slider').slick({
					slidesToShow: 1,
					slidesToScroll: 1,
					/*
						when video play, slider is stopped. 
						but when event mouseout (hover out)/focus out triggered, 
						the slider will contine to play again.
						this is because pauseOnHover and pauseOnFocus default true.
						And because you want adaptiveHeight (full screen slider), 
						i assume you no need to doing pauseOnHover, because all time mouse will stay inside your slider.
						in this case we need to change pauseOnHover and pauseOnFocus to false
					*/
					pauseOnHover:false,
					pauseOnFocus:false,
					autoplay: true,
					autoplaySpeed: 3000,
					dots: true,
					infinite: true,
					adaptiveHeight: true,
					arrows: false
				});
				
				$('.video-slider').click(function(){
					if(videoPlayed){
						/*
							actually this is will never executed. but sometimes 
							this will execute if user spam play pause on slow network.
							so we still leave here to handle if videojs pause event not...