Можно ли как то совместить эти события, чтобы и слайды листать, и кнопки в плеере нажимать?
В том виде, в котором оно есть сейчас - нет. Проблема существует с 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-подобных браузерах из-за особенностей работы песочницы, но на обычной странице все должно быть ок.
Простой
