Почему не встает на паузу 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 & 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 & 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