使HTML5视频尊重父高/宽

Question

我有一张自举卡。一个包含视频，一个包含文本。包含视频的卡片写为：

<div class="card video-card">
    <div class="card-body">
         <video width="100%">
                <source src="/request/video/SampleVideo.mp4" type="video/mp4">
                    Your browser does not support HTML5 video.
         </video>
    </div>
</div>

在加载时，看起来像这样：

问题是，当视频加载时，它会增加它的父容器（增强卡）的高度，随后按下它下面的文本卡。这会导致我的布局溢出如下：

我认为这样做是因为它需要保持其宽高比。但是，有什么方法可以伸展＆＃39;而视频是为了确保它尊重自举卡的宽度/高度？

我宁愿知道布局合适，并努力以匹配的宽高比编辑视频。

感谢。

Answer 1

HTML5视频无法拉伸视频以适合父容器。 Link to similar question.

Answer 2

我刚刚意识到引导程序可以帮助实现这一目标。在视频中添加img-fluid类

<div class="card video-card">
    <div class="card-body">
         <video class="img-fluid" width="100%">
                <source src="/request/video/SampleVideo.mp4" type="video/mp4">
                    Your browser does not support HTML5 video.
         </video>
    </div>
</div>