How to insert full width video as top div?

Question

css

I need to lay out a top div that only consists of a background video (and a block of icons overlaid with position: absolute). I was able to select the area of ​​the video that should be on the screen and position it.

<div class="video-container">
                    <video playsinline autoplay muted loop poster="img/kamado-charcoal-background.jpg" id="Charcoal_video"
                        class="fullscreen-bg__video" height="">
                        <source src="video/Charcoal_kamado.webm" type="video/webm">
                        <source src="video/Charcoal-kamado.mp4" type="video/mp4">
                        Добро пожаловать
                    </video>
                </div>

.video-container {
max-width: 100%
max-height: 100%
}

#Charcoal_video {
    position: relative;
    z-index: -100;
    left: 50%;
    transform: translate(-50%, -24%);
}

Everything should look like in the screenshot - https://yadi.sk/i/qVrKnfBs1Y8IRQ
But, obviously, the video is not cut off. I removed horizontal scrolling with oferflow: hidden on the parent element, although I suspect that this is not a solution to the problem.
But the main question is: for some reason, the video does not respond to setting the top, height parameters that limit the height, it captures more space than the screen area. Plus, an empty space is added below, which interferes with the following elements after it. How can I bring the video to the view from the screenshot, while with limited dimensions strictly on the screen area, and so that the following blocks go immediately below it?

Answer 1

https://vodkabears.github.io/vide/