Pause video in Slick slider when slide is changed

Question

I have a 2-slide carousel using Slick, each slide contains a video, which is pulled from a custom (ACF) media field in Wordpress (hosted files, not embeds from YouTube). If I hit play on one video, and then navigate to the next slide, that video keeps playing, so we still hear the sound.

It makes sense that it would do this, but it's not what I need it to do. When changing slides, I'd like to pause all videos.

Here's what I have.

Html:

<div class="project-carousel">
 <div class="slidewrap">
  <div class="slide">
   <div class="leftcol">
    <div style="width: 640px;" class="wp-video"><!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
     <video class="wp-video-shortcode" id="video-220-1" width="640" height="360" poster="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/ChloeRosser_Breath1.png" preload="metadata" controls="controls"><source type="video/mp4" src="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/Breath-1.mp4?_=1" /><a href="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/Breath-1.mp4">https://cro.matmartin.co.uk/wp-content/uploads/2020/02/Breath-1.mp4</a></video>
    </div>
   </div>
   <div class="rightcol">
    <ul class="nostyle nopad mid-grey">
     <li class="dark-grey">Breath 1</li>
     <li class="small">2018</li>
    </ul>
   </div>
  </div>
 </div>
 <div class="slidewrap">
  <div class="slide">
   <div class="leftcol">
    <div style="width: 640px;" class="wp-video">
     <video class="wp-video-shortcode" id="video-220-2" width="640" height="360" poster="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/ChloeRosser_Breath2.png" preload="metadata" controls="controls"><source type="video/mp4" src="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/Breath-2.mp4?_=2" /><a href="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/Breath-2.mp4">https://cro.matmartin.co.uk/wp-content/uploads/2020/02/Breath-2.mp4</a></video>
    </div>
   </div>
   <div class="rightcol">
    <ul class="nostyle nopad mid-grey">
     <li class="dark-grey">Breath 2</li>
     <li class="small">2018</li>
    </ul>
   </div>
  </div>
 </div>
</div>

jQuery:

$('.project-carousel').slick({
 speed: 500,
 fade: true,
 cssEase: 'linear',
});

The whole thing can be viewed here. This is client artwork and may be considered NSFW if rules are very strict.

Thank you.

Answer 1

Just take this slick script from the demo below and replace your slick script.

Then click the arrow on your site change slide and let me know what the console.log results are.

Read the comments in my slick script so you know what is going on.

// project carousel slick options
$('.project-carousel').slick({
  speed: 500,
  fade: true,
  cssEase: 'linear'

  // before slide change  
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {

  // current slide
  let slide = $('[data-slick-index="' + currentSlide + '"]', this);

  // find video in this slide by mediaelementwrapper
  let video = $('MEDIAELEMENTWRAPPER > VIDEO', slide);

  // if we have a video in this slide
  if (video.length) {

    // please send me what this outputs on your site when you click next slide
    // we might be able to hook into the mediaelementjs object from here and pause the video
    console.log(video);
    
    // also uncomment this and try this
    // $(video).paused = true;

  }

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />

<div class="project-carousel">
  <div class="slide">
    <div id="mep_0" class="mejs-container wp-video-shortcode mejs-video">
      <div class="mejs-inner">
        <div class="mejs-mediaelement">
          <mediaelementwrapper id="video-220-1">
            <video class="wp-video-shortcode" id="video-220-1_html5" width="640" height="360" poster="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/ChloeRosser_Breath1.png" preload="metadata" src="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/Breath-1.mp4?_=1"
              style="width: 478.156px; height: 268.963px;"></video>
          </mediaelementwrapper>
        </div>
      </div>
    </div>
  </div>
  <div class="slide">
    <div id="mep_1" class="mejs-container wp-video-shortcode mejs-video">
      <div class="mejs-inner">
        <div class="mejs-mediaelement">
          <mediaelementwrapper id="video-220-2">
            <video class="wp-video-shortcode" id="video-220-1_html5" width="640" height="360" poster="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/ChloeRosser_Breath1.png" preload="metadata" src="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/Breath-1.mp4?_=1"
              style="width: 478.156px; height: 268.963px;"></video>
          </mediaelementwrapper>
        </div>
      </div>
    </div>
  </div>
  <div class="slide">
    Slide 3
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>