css SwiperJS如何使它有可能在幻灯片上滑动与youtube iframe？

gzszwxb4 于 2023-07-01 发布在其他

关注(0)|答案(2)|浏览(113)

我使用YouTube上的iframe作为SwiperJS中的幻灯片。但是swipe事件不会在iframe上触发。如何从youtube上滑动视频？当然，应该可以播放视频。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;

css

来源：https://stackoverflow.com/questions/73399809/swiperjs-how-to-make-it-possible-to-swipe-on-slides-with-youtube-iframe

2条答案

按热度按时间

368yc8dk1#

只需更新.gallery-thumbs类CSS

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

希望这对你有帮助。

赞(0）回复(0）举报 2023-07-01

b4lqfgs42#

这个问题有什么解决办法吗？Swiper和iframe YouTube Player面临同样的问题

赞(0）回复(0）举报 2023-07-01