I use iframe from YouTube as slides in SwiperJS. But swipe event doesn't fire on iframe. How is it possible to slide over videos from youtube? Of course, it should be possible to play the videos. Thanks Example HTML
<!-- Swiper -->
<body>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="swiper-slide-container">
<iframe width="500" height="400" src=";rel=0" frameborder="0" allowfullscreen></iframe></div></div>
<div class="swiper-slide"><div class="swiper-slide-container"><iframe width="500" height="400" src=";rel=0" frameborder="0" allowfullscreen></iframe></div></div>
</div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="swiper-slide-container"><iframe width="500" height="400" src=";rel=0" frameborder="0" allowfullscreen></iframe></div></div>
<div class="swiper-slide"><div class="swiper-slide-container"><iframe width="500" height="400" src=";rel=0" frameborder="0" allowfullscreen></iframe></div></div>
</div>
</div>
</body>
JavaScript
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
loopedSlides: 4,
// function to stop youtube video on slidechange
on: {
slideChange: function (el) {
$('.swiper-slide').each(function () {
var youtubePlayer = $(this).find('iframe').get(0);
if (youtubePlayer) {
youtubePlayer.contentWindow.postMessage('{"event":"mand","func":"pauseVideo","args":""}', '*');
}
});
},
},
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true,
loop: true,
loopedSlides: 4,
// function to stop youtube video on slidechange
on: {
slideChange: function (el) {
$('.swiper-slide').each(function () {
var youtubePlayer = $(this).find('iframe').get(0);
if (youtubePlayer) {
youtubePlayer.contentWindow.postMessage('{"event":"mand","func":"pauseVideo","args":""}', '*');
}
});
},
},
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
I use iframe from YouTube as slides in SwiperJS. But swipe event doesn't fire on iframe. How is it possible to slide over videos from youtube? Of course, it should be possible to play the videos. Thanks Example https://codepen.io/popenkov/pen/WNzLdEq HTML
<!-- Swiper -->
<body>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="swiper-slide-container">
<iframe width="500" height="400" src="https://www.youtube./embed/a3ICNMQW7Ok?enablejsapi=1&rel=0" frameborder="0" allowfullscreen></iframe></div></div>
<div class="swiper-slide"><div class="swiper-slide-container"><iframe width="500" height="400" src="https://www.youtube./embed/TZtIGzkcv4M?enablejsapi=1&rel=0" frameborder="0" allowfullscreen></iframe></div></div>
</div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="swiper-slide-container"><iframe width="500" height="400" src="https://www.youtube./embed/a3ICNMQW7Ok?enablejsapi=1&rel=0" frameborder="0" allowfullscreen></iframe></div></div>
<div class="swiper-slide"><div class="swiper-slide-container"><iframe width="500" height="400" src="https://www.youtube./embed/TZtIGzkcv4M?enablejsapi=1&rel=0" frameborder="0" allowfullscreen></iframe></div></div>
</div>
</div>
</body>
JavaScript
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
loopedSlides: 4,
// function to stop youtube video on slidechange
on: {
slideChange: function (el) {
$('.swiper-slide').each(function () {
var youtubePlayer = $(this).find('iframe').get(0);
if (youtubePlayer) {
youtubePlayer.contentWindow.postMessage('{"event":"mand","func":"pauseVideo","args":""}', '*');
}
});
},
},
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true,
loop: true,
loopedSlides: 4,
// function to stop youtube video on slidechange
on: {
slideChange: function (el) {
$('.swiper-slide').each(function () {
var youtubePlayer = $(this).find('iframe').get(0);
if (youtubePlayer) {
youtubePlayer.contentWindow.postMessage('{"event":"mand","func":"pauseVideo","args":""}', '*');
}
});
},
},
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
- I tired to add an image in above slider but seems images are getting displayed but only videos are played. Can you help me with addtion of image in your above code. It would help. – cyberspider789 Commented May 11, 2024 at 2:52
2 Answers
Reset to default 7This can be done with a CSS overlay, with some space at the bottom for the YouTube controls and a clip-path polygon to match the size of the YouTube button in the middle of the slide. This works if you always use an aspect ratio of 16/9:
.video-slide {
position: relative;
aspect-ratio: 16 / 9; // always use 16/9 video
container-type: size;
&:after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 14cqh); // show controls
clip-path: polygon(0% 0%, 0% 100%, 44% 100%, 44% 49%, 56% 49%, 56% 67%, 0% 67%, 0% 100%, 100% 100%, 100% 0%); // show play button
}
}
This allows you to swipe on the slide and still make the video full screen from the controls below. But if you swipe from the button or the button controls swiping will not work.
just update your .gallery-thumbs class CSS
.gallery-thumbs {
height: 200px;
box-sizing: border-box;
padding: 10px 0;
overflow-y: hidden;
overflow-x: auto;
}
Hope this will help you.