Bootstrap 4 carousel and youtube video - youtube

Question

I am using Bootstrap 4 carousel with images and embed YouTube video. I have managed to pause slide while video is playing and also to stop video when you press the control button. Although when video is viewed or stopped by pressing the controls the carousel cycle is no longer working automatically and has to go manually. Any help?
<!-- Carousel -->
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="9000">
<!--Indicators -->
<ol class="carousel-indicators_blog">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol><!-- end .Indicators -->
<div class="carousel-inner" role="listbox">
<!-- 01_carousel -->
<div class="carousel-item active">
<img src="http://via.placeholder.com/825x464" class="img-fluid" alt="Responsive image">
</div><!-- end .01_carousel -->
<!-- 02_carousel -->
<div class="carousel-item">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="player" src="https://www.youtube.com/embed/brdYAn6EZcU?rel=0&enablejsapi=1&version=3&playerapiid=ytplayer" allowfullscreen></iframe>
</div><!-- end .embed-responsive -->
</div><!-- end .02_carousel -->
<!-- 03_carousel -->
<div class="carousel-item">
<img src="http://via.placeholder.com/825x464" class="img-fluid" alt="Responsive image">
</div><!-- end .03_carousel -->
</div><!-- end .carousel-inner -->
<!-- Controls -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a><!-- end .Control -->
</div><!-- end .myCarousel -->
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
$('#myCarousel').carousel('pause');
done = true;
}
}
</script>
<script>
$('a.carousel-control-prev').click(function(){
$('#player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
$('a.carousel-control-next').click(function(){
$('#player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
</script>

Answer 1

I came across the same issue today!
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
$('#homepage-slider').carousel('pause');
done = true;
console.log('play'+YT.PlayerState.PLAYING);
}
if (event.data == YT.PlayerState.PAUSED) {
console.log(YT.PlayerState.PAUSED);
$('#homepage-slider').carousel('cycle');
}
}