使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>

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

​

​

问题是，当视频加载时，它会增加其父容器(引导卡)的高度，随后会将下面的文本卡压下。这会导致我的布局溢出，如下所示：

​

我假设它这样做是因为它需要保持它的纵横比。但是，有没有办法可以“拉伸”视频，以确保它尊重引导卡的宽度/高度？

我宁愿知道布局是可以的，并努力以匹配的纵横比编辑视频。

谢谢。