如何在引导程序-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：Fiddle

Answer 1

Rich。砸钱。通过添加类比率和ratio-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 -->