如何用引导视频轮播填充div？

如何解决如何用引导视频轮播填充div？

我正在尝试用视频轮播填充下面的div。问题在于最小宽度或高度不会影响iFrame。如果我将iFrame的位置设置为相对，则可以，但是视频会移出div。

有人知道如何解决此问题吗？

    <div class="h-75 shadow border rounded">

                <!-- Carousel controls -->

                <div class="row mt-2 ml-2 mr-2">
                    <div class="col">
                        <p class="h4 font-weight-bold">This shows a video carousel</p>
                    </div>
                    <div class="col d-flex justify-content-end">
                        <a class="btn btn-primary mb-3 mr-1" href="#carousel-video" role="button" data-slide="prev">
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-left" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
                            </svg>
                        </a>
                        <a class="btn btn-primary mb-3 " href="#carousel-video" role="button" data-slide="next">
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
                            </svg>
                        </a>
                    </div>
               </div>

                <!-- Beginning of video carousel -->

                <div id="carousel-video" class="carousel slide mt-3 ml-3 mr-3">
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-video" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-video" data-slide-to="1"></li>
                        <li data-target="#carousel-video" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/6hgVihWjK2c?rel=0" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/84910153?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;color=ffffff" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/oiKj0Z_Xnjc" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End of video carousel -->

            </div>
</div