I designed a carousel slider with one img and one video From YouTube. what I want is slider transition for img is 5 sec and then slide to video and stop and play complete video and then again slide to img and repeat this approach. Now slider working like img transition time is 5 sec and slide to video play complete video and not sliding img back to home section as I want. That's my code please help he If you are good at this. please inform me if you need more details
<?php $hero=carbon_get_theme_option('herosection');if($hero){?>
<section class="herovideo">
<div id="myCarouselmain" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php $herocount=0; foreach($hero as $item){?>
<li data-target="#myCarouselmain" data-slide-to="<?php echo $herocount?>" class="<?php if($herocount==false){echo "active";}?>"></li>
<?php $herocount++;}?>
</ol>
<div class="carousel-inner">
<?php $herocount2=0; foreach($hero as $item){?>
<?php if($item['herovideo'] == false){?>
<div class="carousel-item <?php if($herocount2==false){echo "active";}?>">
<img class="d-block w-100" src="<?php echo $item['heroimage'];?>" alt="image slide">
<div class="carousel-cap ">
<h5><?php echo do_shortcode($item['herotitle']);?></h5>
<p class="lore"><?php echo do_shortcode($item['herodesc']);?></p>
<a href="<?php echo $item['herodescbtntxur1'];?>" class="btn btnhero"><?php echo $item['herodescbtntx1'];?></a>
<a href="<?php echo $item['herodescbtntxtxur2'];?>" class="btn btnhero 2nd"><?php echo $item['herodescbtntxtx2'];?></a>
</div>
</div>
<?php } $herocount2++;}foreach($hero as $item){ ?>
<?php if($item['herovideo'] == true){?>
<div class="carousel-item " id="myCarousel">
<div id="moviesCarousel" class="carousel slide d-block col-lg-12" data-ride="carousel" data-interval="2000">
<div class="carousel-inner d-block w-100 border-right-0 embed-responsive embed-responsive-16by9" style="width=100;"> <!-- embed is used for responsive size regardless of device -->
<div class="carousel-item d-block embed-responsive-item active">
<iframe id="katniss" src="https://www.youtube.com/embed/uLtGW2Aexjw?enablejsapi=1&autoplay=1&mute=1&rel=0&theme=light" style="width:100%;background-color:#fff;"allowfullscreen></iframe>
</div>
</div>
</div>
<!-- jQuery first, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
$(document).ready(function()
{
// When a slide occurs, pause the current iframe video that is playing
// player.pauseVideo():Void - Pauses the currently playing video.
// Reference: https://developers.google.com/youtube/iframe_api_reference#Playback_controls
$('#moviesCarousel').on('slide.bs.carousel', function(event) {
// The variable "players" contain each Youtube Player for each iframe video
// Reference: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
// event.from - The index of the current video (before the slide occurs)
// - It is also the index of the corresponding player for the current video
// Reference: https://getbootstrap.com/docs/4.4/components/carousel/#events
players[event.from].pauseVideo();
});
});
// Start of snippet from: https://developers.google.com/youtube/iframe_api_reference
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = []; // would contain 1 player for each iframe video
function onYouTubeIframeAPIReady()
{
var allMovieIframes = document.getElementById("moviesCarousel").getElementsByTagName('iframe');
for (currentIFrame of allMovieIframes)
{
players.push(new YT.Player(
currentIFrame.id, // the target iframe video, here it is either katniss, rancho, or logan
{ events: { 'onStateChange': onPlayerStateChange } }
));
}
}
function onPlayerStateChange(event) // triggered everytime ANY iframe video player among the "players" list is played, paused, ended, etc.
{
// Check if any iframe video is being played (or is currently buffering to be played)
// Reference: https://developers.google.com/youtube/iframe_api_reference#Events
if (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING)
{
// If any player has been detected to be currently playing or buffering, pause the carousel from sliding
// .carousel('pause') - Stops the carousel from cycling through items.
// Reference: https://getbootstrap.com/docs/4.4/components/carousel/#methods
$('#moviesCarousel').carousel('pause');
}
else
{
// If there are no currently playing nor buffering videos, resume the sliding of the carousel.
// This means that once the current video is in a state that is not playing (aside from buffering), either it was:
// 1. paused intentionally
// 2. paused as an effect of a slide
// 3. video has ended
// 4. wasn't totally played from the start
// 5. and literally any form where the video timer isn't running ;)
// - then the carousel would now resume sliding.
$('#moviesCarousel').carousel();
}
}
// End of snippet from Youtube iframe API
</script>
</div>
<?php }
?>
<?php }?>
</div>
</div>
</section>
<?php }?>