使 HTML5 视频尊重父级高度/宽度答案

【问题标题】：Making HTML5 Video Respect Parent Height / Width使 HTML5 视频尊重父级高度/宽度
【发布时间】：2020-07-16 11:29:26
【问题描述】：

我有一张引导卡。一个包含视频，另一个包含文本。包含视频的卡片写成：

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

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

问题在于，当视频加载时，它会增加其父容器（boostrap 卡片）的高度，随后将其下方的文本卡片向下推。这会导致我的布局如下溢出：

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

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

谢谢。

【问题讨论】：

@Klooven 那不就是去掉卡片内边距吗？
是的，对不起，我搞砸了。
@Klooven - 没问题，感谢您试一试

标签： html html5-video bootstrap-4

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：