slide slider after video is complete

I'm using PHP slider to create a hero section I have a YT video and an image that every thing is working fine but What I want to achieve is when the slide gets to the YT video the slider stops until the video has finished and then start the slider again and hold on img for 5sec and again slide to video.

here is hero.php code

    <?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">
 
            
            <iframe  class="d-block  w-100 videoslider"  src="<?php echo esc_url($item['herovideo']);?>?autoplay=1&mute=1&rel=0&vq=720&loop=1&playlist=uLtGW2Aexjw" title="YouTube video player" frameborder="0" allow=" accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" width="100%" allowfullscreen="allowfullscreen" ></iframe>
        
        
      </div>

        <?php }
        ?>
  <?php }?>

    </div>
  </div>
</section>
<?php }?>