0

I use iframe from YouTube as slides in SwiperJS. But swipe event doesn't fire on iframe. How is it possible to slide over videos from youtube? Of course, it should be possible to play the videos. Thanks Example https://codepen.io/popenkov/pen/WNzLdEq HTML

 <!-- Swiper -->
<body>
    <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
                    <div class="swiper-slide"><div class="swiper-slide-container">
                        <iframe width="500" height="400" src="https://www.youtube.com/embed/a3ICNMQW7Ok?enablejsapi=1&rel=0" frameborder="0" allowfullscreen></iframe></div></div>
    <div class="swiper-slide"><div class="swiper-slide-container"><iframe width="500" height="400" src="https://www.youtube.com/embed/TZtIGzkcv4M?enablejsapi=1&rel=0" frameborder="0" allowfullscreen></iframe></div></div>
            </div>
    </div>
    <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper">
                    <div class="swiper-slide"><div class="swiper-slide-container"><iframe width="500" height="400" src="https://www.youtube.com/embed/a3ICNMQW7Ok?enablejsapi=1&rel=0" frameborder="0" allowfullscreen></iframe></div></div>
    <div class="swiper-slide"><div class="swiper-slide-container"><iframe width="500" height="400" src="https://www.youtube.com/embed/TZtIGzkcv4M?enablejsapi=1&rel=0" frameborder="0" allowfullscreen></iframe></div></div>
            </div>
    </div>
</body>

JavaScript

 var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
            loop: true,
            loopedSlides: 4,
        // function to stop youtube video on slidechange
        on: {
            slideChange: function (el) {
              $('.swiper-slide').each(function () {
                  var youtubePlayer = $(this).find('iframe').get(0);
                  if (youtubePlayer) {
                    youtubePlayer.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
                  }
              });
            },
        },
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true,
            loop: true,
            loopedSlides: 4,
        // function to stop youtube video on slidechange
        on: {
            slideChange: function (el) {
              $('.swiper-slide').each(function () {
                  var youtubePlayer = $(this).find('iframe').get(0);
                  if (youtubePlayer) {
                    youtubePlayer.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
                  }
              });
            },
        },
    });
    galleryTop.controller.control = galleryThumbs;
    galleryThumbs.controller.control = galleryTop;
TonyRandom
  • 23
  • 1
  • 4

1 Answers1

0

just update your .gallery-thumbs class CSS

.gallery-thumbs {
        height: 200px;
        box-sizing: border-box;
        padding: 10px 0;
        overflow-y: hidden;
        overflow-x: auto;
}

Hope this will help you.

QuantumX
  • 118
  • 9