How to remove top and bottom space of HTML video element?

I came across this problem right now, while creating a video element:

The black-coloured box is the video (just a preview), and it's the same width and height as the other images. On inspection, I found out that the video took up all the white space above and below it. I presume all videos have this, but there should(might?) be a solution for getting rid of it, in my mind 😀. By the way, I tried increasing the height, but to no avail; but apparently, the whitespace is calculated proportionally to the height of the video.

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

Okay, so I've got the answer.. What happens is that the HTMLVideoElement has an aspect ratio, right? And this aspect ratio is maintained even if I resize the video using width and height. So if I specify the height I want, the width is automatically calculated to keep the same aspect ratio, and vice-versa. So when I give a width and height not pertaining to the aspect ratio, The video does take that width and height, yet still keeping the white bars on top of them