Slick Slider with Video

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

by R

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">

        <video width="100%" height="100%" autoplay="" loop="" muted="" playsinline="" preload="auto" class="hero-video media-document mac video">
          
                      <source src="http://iusdd9.district.development-preview.com/sites/default/files/media-video/2023-07/phs_campus_shots_4.mp4" type="video/mp4">
                  </video>
                </div>
            </div>
            <div>
                <div class="video-wrapper">
        <video width="100%" height="100%" autoplay="" loop="" muted="" playsinline="" preload="auto" class="hero-video media-document mac video">
          
                      <source src="http://iusdd9.district.development-preview.com/sites/default/files/media-video/2023-07/phs_athletics_3.mp4" type="video/mp4">
                  </video>
                </div>
            </div>          
        </div>

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