Ytukyg

There's a few issues with video backgrounds in the Slick.js carousel that I am running into.

HTML:

<div id="mySlick">

     <div class="item">

          <img class="carousel-item-background" src="images/01.jpg">     

     </div>

     <div class="item">

          <img class="carousel-item-background" src="images/02.jpg">     

     </div>

     <div class="item">

          <img class="carousel-item-background" src="images/03.jpg">     

     </div>

     <div class="item">

          <div class="carousel-item-background">

               <video class="bgVid" autoplay muted loop preload>

                    <source src="video.mp4" type="video/mp4">

               </video>

          </div>    

     </div>

</div>

JS:

$("#mySlick").on('init', function(event. slick){

     $(".carousel-item-background").each(function(){

          $(this).find('.bgVid').get(0).play();

     });

});



$("#mySlick").slick({

     dots: false,

     infinite: true,

     speed: 1000,

     slidesToShow: 1,

     slidesToScroll: 1,

     autoplay: true,

     autoplaySpeed: 10000,

     arrows: true,

     focusOnSelect: true

});



function reloadBGVid(){

     $("video[class='bgVid']").each(function(){

          var ve = $(this);

          var $video = ve.get(0);

          if ($video.paused){

               $video.play();          

          }

     });

};

Barring the CSS I excluded, the slider loads and appears fine. I can click next and previous through the slider all the way around. The first time I click NEXT all through the slider, when I arrive at the video slide, the video will start from the beginning, and the first time I click PREVIOUS to the video slide, even if I have waited a few seconds for the video to start playing, I can see during the transition between the FIRST slide and the LAST slide that the video has progressed, but when the transition ends, the video rewinds to the beginning and plays from there. I have NO afterChange calls in my script.

The second issue I have is responsive. I have a media query in the CSS, if the window is less than 768px wide, the video is set to display: none. I have a jQuery function, if the window is 768px or larger, the media query is nullified and the reloadBGVid() function is called. But no matter how I target the .bgVid, it simply will not play the video again.

The code you posted in your question contains errors and does not work at all.

I cannot find a reason to have both autoplay attribute in video tag and oninit event handler.

Also it is not clear where you're calling reloadBGVid function.

So I'm just leaving for you the snippet below in hope it helps:

$(document).ready(function() {



  $("#mySlick").on('init', function(event) {

    $(".carousel-item-background .bgVid").each(function(i, e) {

      e.play();

    });

  });



  $("#mySlick").slick({

    dots: false,

    infinite: true,

    speed: 1000,

    slidesToShow: 1,

    slidesToScroll: 1,

    autoplay: true,

    autoplaySpeed: 10000,

    arrows: true,

    focusOnSelect: true

  });



  function reloadBGVid() {

    $("video.bgVid").each(function(i, e) {

      if (e.paused) e.play();

    });

  }

});

body {background: #259}

#mySlick {width:436px; height:300px; margin: auto}

video {width:426px; height:240px; object-fit:cover}

<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet" />

<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>



<div id="mySlick">

  <div class="item">

    <img class="carousel-item-background" src="https://picsum.photos/426/240?1">

  </div>

  <div class="item">

    <img class="carousel-item-background" src="https://picsum.photos/426/240?2">

  </div>

  <div class="item">

    <img class="carousel-item-background" src="https://picsum.photos/426/240?3">

  </div>

  <div class="item">

    <div class="carousel-item-background">

      <video class="bgVid" muted loop preload>

       <source src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4" type="video/mp4">

      </video>

    </div>

  </div>

</div>