如何删除 HTML 视频元素的顶部和底部空间？答案

【问题标题】：How to remove top and bottom space of HTML video element?如何删除 HTML 视频元素的顶部和底部空间？
【发布时间】：2021-03-31 12:59:12
【问题描述】：

我现在在创建视频元素时遇到了这个问题：

黑色框是视频（只是预览），它的宽度和高度与其他图像相同。经过检查，我发现视频占据了它上面和下面的所有空白区域。我想所有的视频都有这个，但在我看来应该（可能？）有一个解决方案来摆脱它？？？？？顺便说一句，我尝试增加高度，但无济于事；但显然，空白是根据视频的高度按比例计算的。

myDropzone.on('addedfile', async function (file) {
        console.log(file.type)
        if (file.type && file.type.split('/')[0] == 'video') {
            $(file.previewElement).find(".preview").children().eq(0).remove()
            let url = URL.createObjectURL(file)
            $(file.previewElement).find(".preview").append(`<video width="80" height="80"></video>`)
            $(file.previewElement).find(".preview > video").one('loadeddata', function(){
                URL.revokeObjectURL(url);
            });
            $(file.previewElement).find(".preview > video").attr("src", url)
        }

【问题讨论】：

请向我们展示您的代码，没有它我们只是猜测（我的猜测是我们需要考虑各种纵横比）。请参阅 [link]stackoverflow.com/help/minimal-reproducible-example 获取有关如何向我们展示足够的代码以帮助我们提供帮助的帮助。
好的，我会编辑..但我没有考虑纵横比（只是想把它放在屏幕上:)
视频的纵横比看起来和上面的imgs的纵横比不一样，这很正常，但是你必须补偿以去除视频上方的空白。
你说得对，我当时确实为那个改了css，我已经更新了

标签： html css html5-video

【解决方案1】：

好的，我已经知道答案了。HTMLVideoElement 有一个纵横比会发生什么，对吧？即使我使用宽度和高度调整视频大小，这个纵横比也会保持不变。因此，如果我指定了我想要的高度，则会自动计算宽度以保持相同的纵横比，反之亦然。因此，当我给出与纵横比无关的宽度和高度时，视频确实采用了该宽度和高度，但仍将白条保持在其顶部

【讨论】：