Video embed sizing

I’ve been stuck on this one for some time now.
I’d like the background video embed to take up 100% of the veiwport height, no matter how the browser window is resized. What’s happening now, is the width and height of the video is responding to the window size, so that when the window shrinks in width, the height of the video shrinks, leaving a gap at the bottom. The video is embedded from vimeo using the following code:


<div style="padding:56.25% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/644885876?h=3269540b66&background=1&autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>




Here is my site Read-Only: LINK
([how to share your site Read-Only link][2])