Slick Slider with Video

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

by Virtual

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="container"><div class="row">
<div class="col-sm-12">
<section class="slider">
  <ul class="slickslide">
  
  <li>
    <section class="content-section video-section">
      <div class="pattern-overlay">
        <a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=_fqMv5OUVj4',containment:'.video-section', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a>
        <div class="container">
          <div class="row">
            <div class="col-lg-12">
              <h3>Enjoy Adding Full Screen Videos to your Page Sections</h3>
            </div>
          </div>
        </div>

      </div>
    </section>
  </li>
  <li>slide2</li>
  <li>slide3</li>
  <li>slide4</li></ul>
</section>

</div>
</div>
</div>
<h2>
Welcome to this page!
</h2><h2>
Welcome to this page!
</h2><h2>
Welcome to this page!
</h2><h2>
Welcome to this page!
</h2><h2>
Welcome to this page!
</h2><h2>
Welcome to this page!
</h2><h2>
Welcome to this page!
</h2><h2>
Welcome to this page!
</h2><h2>
Welcome to this page!
</h2><h2>
Welcome to this page!
</h2><h2>
Welcome to this page!
</h2><h2>
Welcome to this page!
</h2><h2>
Welcome to this page!
</h2><h2>
Welcome to this page!
</h2><h2>
Welcome to this page!
</h2>

CSS

h2 { margin-top:15px;}
.slick-slide {
  height: 300px;
  background: skyblue;
  background:url('https://www.montana.edu/cpa/cope/image_manager/thumbnail/3ugsy/image10.jpg'); background-size:cover;
  color: white;
  font-size: 30px;
  font-family: "Arial";
  position: relative;
  min-width:500px;
}

.slick-slide h1 {
  position: absolute;
  top: 100px;
  left: 10%;
  padding: 20px;
}

.slick-slide:nth-child(1),
.slick-slide:nth-child(3),
.slick-slide:nth-child(5) {
  background: teal;
}

.video-section .pattern-overlay {
  background-color: rgba(71, 71, 71, 0.59);
  padding: 110px 0 32px;
  min-height: 496px;
  /* Incase of overlay problems just increase the min-height*/
}

.video-section h1,
.video-section h3 {
  text-align: center;
  color: #fff;
}

.video-section h1 {
  font-size: 110px;
  font-family: 'Buenard', serif;
  font-weight: bold;
  text-transform: uppercase;
  margin: 40px auto 0px;
  text-shadow: 1px 1px 1px #000;
  -webkit-text-shadow: 1px 1px 1px #000;
  -moz-text-shadow: 1px 1px 1px #000;
}

.video-section h3 {
  font-size: 25px;
  font-weight: lighter;
  margin: 0px auto 15px;
}

.video-section .buttonBar {
  display: none;
}

.player {
  font-size: 1px;
}

JavaScript

$(document).ready(function() {
  $(".player").mb_YTPlayer();
    $('.slickslide').slick({
        dots: true,
        infinite: true,
        speed: 500,
        fade: false,
        slide: 'li',
        cssEase: 'linear',
        centerMode: true,
        slidesToShow: 1,
        variableWidth: true,
        autoplay: false,
        autoplaySpeed: 8000,
        responsive: [{
            breakpoint: 800,
            settings: {
                arrows: false,
                centerMode: false,
                centerPadding: '40px',
                variableWidth: false,
                slidesToShow: 1,
                dots: true
            },
            breakpoint: 1200,
            settings: {
                arrows: false,
                centerMode: false,
                centerPadding: '40px',
                variableWidth: false,
                slidesToShow: 1,
                dots: true

            }
        }],
        customPaging: function (slider, i) {
            return '<button class="tab">' + $('.slick-thumbs li:nth-child(' + (i + 1) + ')').html() + '</button>';
        }
    });
});