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

Question

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

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

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

Answer 1

好吧，我已经得到答案了。发生的情况是 HTMLVideoElement 有长宽比，对吗？即使我使用宽度和高度调整视频大小，也会保持此宽高比。因此，如果我指定所需的高度，则会自动计算宽度以保持相同的纵横比，反之亦然。因此，当我给出与纵横比无关的宽度和高度时，视频确实采用了该宽度和高度，但仍将白色条保留在其顶部

Answer 2

解决您的问题

    Video{
    object-fit:cover
}