Swiper Slider will start video playing after popup - popup

Question

I am using swiper.js and fancybox v3 to create a popup gallery. One of the slide contain a video, however after I have click and open popup, the video will load and start playing whatever which slide I landed. I have tried to use any events to stop pause the video but it still can't work. Anyone got a solutions?
Here is a codepen example:
$(document).ready(function () {
var mySwiper = new Swiper('.swiper-container', {
init: false,
pagination: {
el: '.swiper-pagination',
observer: true,
observeParents: true,
on: {
slideChangeTransitionStart: function () {
$('.swiper-slide').find('video').each(function () {
console.log(this);
this.pause();
});
},
slideChangeTransitionEnd: function () {
$('.swiper-slide').find('video').each(function () {
this.pause();
});
}
}
},
})
$('.fancybox-trigger').click(function (e) {
e.preventDefault();
var thisTarget = $(this).data('index');
$.fancybox.open({
src: "#lightbox",
type: 'inline',
opts: {
toolbar: false,
defaultType: 'inline',
autoFocus: true,
touch: false,
afterLoad: function () {
mySwiper.init();
mySwiper.slideTo(thisTarget - 1)
$('swiper-slide').find('video').each(function () {
this.pause();
})
}
}
})
})
});
https://codepen.io/anon/pen/mKOwag?editors=0010

Answer 1

I am not swiper expert, therefore I can not explain why, but I found that callbacks work if you add them like this:
mySwiper.on('slideChange', function() {
$('.swiper-slide').find('video').each(function() {
this.pause();
});
});
Demo - https://codepen.io/anon/pen/ERNogR