<script src="https://www.youtube.com/iframe_api"></script>
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <iframe id="player1" width="715" height="402" src="https://www.youtube.com/embed/Ajm2snukYaA?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="swiper-slide">
      <iframe id="player2" width="715" height="402" src="https://www.youtube.com/embed/8UVNT4wvIGY?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="swiper-slide">
      <iframe id="player3" width="715" height="402" src="https://www.youtube.com/embed/7iLu-jLhwOA?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

.swiper-slide {
  aspect-ratio: 16/9;
  iframe {
    width: 100%;
    height: 100%;
  }
}

const swiper = new Swiper(".swiper", {
  slidesPerView: 2,
  spaceBetween: 10,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  on: {
    slideChange: function() {
      pauseAllVideos();
    }
  }
});

function pauseAllVideos() {
  const iframes = document.querySelectorAll('iframe');
  iframes.forEach((iframe) => {
    iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
  });
}