Owl Carousel2 - pause youtube on slide change

Pause youtube video on slide changes with Owl Carousel 2.3.4

by DannyEnglander

HTML

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
    <div class="item">
      <div class="flex-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/t09higEubD8?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen sandbox="allow-same-origin allow-scripts allow-presentation"></iframe>
      <!-- Make sure to enable the API by appending the "&enablejsapi=1" parameter onto the URL. -->
      </div>
    </div>
    <div class="item"><h4>2</h4></div>
    <div class="item">
<div class="flex-video">
<iframe  width="560" height="315" src="https://www.youtube.com/embed/G1lq40tR72Q?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen sandbox="allow-same-origin allow-scripts allow-presentation"></iframe></div></div>
</div>

JavaScript

$('.owl-carousel').owlCarousel({
	loop: true,
	items: 1,
	margin: 0,
	nav: true,
	autoHeight: true,
	onTranslate: function(event) {

		var currentSlide, player, command;

		currentSlide = $('.owl-item.active');

		player = currentSlide.find(".flex-video iframe").get(0);

		command = {
			"event": "command",
			"func": "pauseVideo"
		};

		if (player != undefined) {
			player.contentWindow.postMessage(JSON.stringify(command), "*");

		}

	}
});