Почему слайдер на базе Swiper с видео YouTube в iframe не двигается при свайпе?

Question

[991o2o9]

Почему не получается сделать так, чтобы слайдер с Swiper, в котором находится iframe, двигался при свайпе?

<div className={style.slider}>
			<Swiper
				touchEventsTarget='container'
				rewind={rewind}
				loop={loop}
				slidesPerView={2}
				wrapperClass={style.wrapper}
				spaceBetween={10}
				max-width={656}
				slidePrevClass={style.prev}
				slideNextClass={style.next}
				slideActiveClass={style.active}
				initialSlide={1}
				centeredSlides={true}
				pagination={{
					clickable: true,
					paginationDisabledClass: '.swiper-pagination-bullet-active',
					bulletActiveClass: style.swiperPaginationBulletActive
				}}
				modules={[Pagination]}
				className={style.swiperContainer}
				breakpoints={{
					744: {
						slidesPerView: 2
					},
					0: {
						slidesPerView: 1
					}
				}}
			>
				{videos.map((item, i) => (
					<SwiperSlide key={i}>
						<div className={style.slide}>
							<iframe
								width='100%'
								height='100%'
								src={`https://www.youtube.com/embed/${getVideoId(item.link)}`}
								title='YouTube video player'
								frameBorder='0'
								allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
								allowFullScreen
							></iframe>
						</div>
					</SwiperSlide>
				))}
			</Swiper>
		</div>

Comments

[Виталий Першин]

Потому что iframe перехватывает все события.

Answer 1

[Вадим Освальд]

iframe {
  pointer-events: none;
}