如何在Bootstrap-5中创建响应式视频

Question

我有一个两列布局，并希望有一个视频在第一列，并在第二个是响应性的图像。我已经尝试了几个选项，图像工作良好，但视频没有响应。我所能创建的最好的结果是没有视频的宽度/高度属性。

                       <div class="row">
                                <div class="col-sm-6 order-first">
                                        <div class="card">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/mEQ8NJsAowg" title="Player One" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                                <div class="card-body">
                                                        <h5 class="card-title">196</h5>
                                                        <input type="number" name="playerOneAddScore" id="playerOneAddScore">
                                                        <p class="card-text">
                                                        </p>
                                                </div>
                                        </div>
                                </div>
                                <div class="col-sm-6">
                                <div class="card">
                                        <img src="https://dummyimage.com/1280x720/000/fff&text=Test+image" class="card-img-top img-fluid" alt="Player Two">
                                        <div class="card-body">
                                                <h5 class="card-title">196</h5>
                                                        <input type="number" name="playerOneAddScore" id="playerOneAddScore">
                                                        <p class="card-text">
                                                        </p>
                                        </div>
                                </div>
                        </div><!-- end row -->

小提琴：Fiddle

Answer 1

里奇。赚到钱了。通过添加类别比率和比率-16x9，我能够获得所需的响应视频。这确实与卡片中的其他元素有一些意想不到的行为，然而，这可能是我选择的容器(卡片)的结果。但是，我将在一个新的问题中解决这个问题。谢谢

            <div class="row">
                    <div class="col-sm-6 order-first">
                            <div class="card ratio ratio-16x9">
                                    <iframe src="https://www.youtube.com/embed/mEQ8NJsAowg" title="Player One" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                    <div class="card-body">
                                            <h5 class="card-title">196</h5>
                                            <input type="number" name="playerOneAddScore" id="playerOneAddScore">
                                            <p class="card-text">Something here
                                            </p>
                                    </div><!-- end card-body -->
                            </div><!-- end card -->
                    </div><!-- col-sm-6 -->

                    <div class="col-sm-6">
                            <div class="card">
                                    <img src="https://dummyimage.com/1280x720/000/fff&text=Test+image" class="card-img-top img-fluid" alt="Player Two">
                                    <div class="card-body">
                                            <h5 class="card-title">196</h5>
                                                    <input type="number" name="playerTwoAddScore" id="playerTwoAddScore">
                                                    <p class="card-text">Something here
                                                    </p>
                                    </div><!-- end card-body -->
                            </div><!-- end card -->
                    </div><!-- col-sm-6 -->
            </div><!-- end row -->