@vahromeevilya-widestudio

Почему YouTube мешает Swiper?

слайдер swiper - 6.8.4
63402ac64cf3c713651907.png

Когда подгружается ютубовское видео через iframe, то слайды , в которых есть iframe с youtube перестают реагировать на события SWIPER . Не получается перелистнуть слайд на следующий или предыдущий, потому что все события обрабатываются ютубовским api.
Вот codepen https://codepen.io/vahromeevilya-widestudio/pen/KKRZRmm
Можно ли как то совместить эти события, чтобы и слайды листать, и кнопки в плеере нажимать?
  • Вопрос задан
  • 1099 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Можно ли как то совместить эти события, чтобы и слайды листать, и кнопки в плеере нажимать?

В том виде, в котором оно есть сейчас - нет. Проблема существует с 2013 года как минимум и будет решена примерно никогда, потому что обе стороны конфликта говорят, что проблема не на их стороне. Но можно вместо интерфейса от youtube прикрутить свой. То есть плеер оставить, но управление сделать свое, которое будет как-то сочетаться с имеющимся интерфейсом. Такой вот компромисс. Концептуально это будет выглядеть так, что мы убираем стандартный iframe, отключаем для плеера pointer-events:
<div class='swiper' id='my-slider'>
    <div class='swiper-wrapper'>
        <div class='swiper-slide'>Slide 1</div>
        <div class='swiper-slide' id='youtube-slide'>
            <div id='player'></div>
        </div>
        <div class='swiper-slide'>Slide 3</div>
        <div class='swiper-slide'>Slide 4</div>
    </div>
</div>
<style>
#player {
    pointer-events: none;
}
</style>

И переходим к API на js, чтобы сформировать свой плеер, который мы будем контролировать:
const youtubeScriptTag = document.createElement('script');
youtubeScriptTag.src = 'https://www.youtube.com/iframe_api';
document.body.appendChild(youtubeScriptTag);

window.onYouTubeIframeAPIReady = () => {
    const player = new YT.Player('player', {
        videoId: 'orbr-C3gYKk',
        playerVars: {
            controls: 0
        },
        events: {
            onReady: (event) => {
                const youtubeSlide = document.getElementById('youtube-slide');
                let isVideoPlaying = false;

                youtubeSlide.addEventListener('click', () => {
                    if (isVideoPlaying) {
                        event.target.stopVideo();
                    } else {
                        event.target.playVideo();
                    }

                    isVideoPlaying = !isVideoPlaying;
                });
            }
        }
    });
}

const swiper = new Swiper('#my-slider', {});

В playerVars можно передать всякие параметры и немного настроить внешний вид плеера (убрать лишнее). И можно все подвесить на события свайпера, чтобы запускать или останавливать видео при переходе на нужный слайд, ну или что там нужно по дизайну.

P.S.: На CodePen метод playVideo может не работать в Chrome-подобных браузерах из-за особенностей работы песочницы, но на обычной странице все должно быть ок.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы