Почему не встает на паузу Youtube видео в Swiper слайдере при листании?

Коллеги, прошу, поясните, почему видео не стопается при листании слайдера

САБЖ: есть Swiper слайдер. В нем есть Ютьюб видео. при событии slideChange видео должно вставать на паузу, но это не происходит.

Прошу, укажите, что я сделала не так?

  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="videoGallerySlider__item">
        <div class="videoGallerySlider__wrapper">
          <div class="videoGallerySlider__video _prop_9-16"><iframe class="frame" src="https://vk.com/video_ext.php?oid=-221410728&id=456239030&hd=2" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture;" frameborder="0" allowfullscreen></iframe></div>

        </div>
        <div class="videoGallerySlider__text text">
          <p>Это описание к видео</p>
        </div>
      </div>

    </div>
    <div class="swiper-slide">
      <div class="videoGallerySlider__item">
        <div class="videoGallerySlider__wrapper">
          <div class="videoGallerySlider__video _prop_9-16"><iframe class="frame" width="1264" height="711" src="https://www.youtube.com/embed/m4h-R-5zVUY" title="Cool Jazz Music ️?☕ Cool Autumn Jazz &amp; Sweet August Bossa Nova to study, work and relax" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>

        </div>
        <div class="videoGallerySlider__text text">
          <p>Это видео без обложки, но с описанием, а далее видео без описания и обложки</p>
        </div>
      </div>

    </div>
    <div class="swiper-slide">
      <div class="videoGallerySlider__item">
        <div class="videoGallerySlider__wrapper">
          <div class="videoGallerySlider__video _prop_9-16"><iframe class="frame" src="https://vk.com/video_ext.php?oid=-221410728&id=456239030&hd=2" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture;" frameborder="0" allowfullscreen></iframe></div>

        </div>
        <div class="videoGallerySlider__text text">
          <p>Это описание к видео</p>
        </div>
      </div>

    </div>
    <div class="swiper-slide">
      <div class="videoGallerySlider__item">
        <div class="videoGallerySlider__wrapper">
          <div class="videoGallerySlider__video _prop_9-16"><iframe class="frame" width="1264" height="711" src="https://www.youtube.com/embed/m4h-R-5zVUY" title="Cool Jazz Music ️?☕ Cool Autumn Jazz &amp; Sweet August Bossa Nova to study, work and relax" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>

        </div>
        <div class="videoGallerySlider__text text">

        </div>
      </div>

    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div> 

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":""}',
      "*"
    );
  });
}

Ссылка на кодепен


Ответы (1 шт):

Автор решения: UModeL

Для управления встроенным YT-плеером, добавьте следующий параметр и значение:

enablejsapi=1

Ссылка-источник фрейма должна выглядеть следующим образом:

https://www.youtube.com/embed/m4h-R-5zVUY?enablejsapi=1

или так

https://www.youtube.com/embed/m4h-R-5zVUY?autoplay=1&enablejsapi=1
→ Ссылка