我有一个bootstrap 4视频轮播，我希望在播放完第一个视频后自动将下一个视频幻灯片放到画面中。我试图设置数据间隔以匹配视频，但是第二个视频较长，因此无法解决我的问题。有什么解决办法吗？
将数据间隔匹配到第一个视频
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-12 col-md-8 pb-3">
<div class="video-width-testimonials bg-white shadow-sm rounded p-2 mx-lg-auto">
<!-- Video Block -->
<div id="youTubeVideoPlayer" class="video-player">
<!-- Video Iframe -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="500" height="315" src="https://www.youtube.com/embed/*****" class="vid-one" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen-two></iframe>
</div>
</div>
<div class="carousel-item">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/*****" class="vid-one" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen-two></iframe>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- End Video Iframe -->
</div>
<!-- End Video Block -->
</div>
</div>
</div>
</div>
auto slide to next video when video finished