margin-top change based on content height

Question

I've got a video that I'm using as a background above the fold on a page, spanning 100% width. I want the video to be situated at almost the center point of the page. I figured the best option was to have the height set to something along the lines of using vh. However, I noticed that when I get to larger screens, since the video itself re-sizes to the larger width, it makes the video height larger as well, resulting in the whole bottom being cut off.

This is what I have:

    .container {
      position: relative;
      margin-top: 20vh;
    }

    .video {
      opacity: .2;
      width: 100vw;
      vertical-align: middle;
      height: auto;
    }

Is there a way to figure out how what the height of the video is, which then I could use to figure out how much padding I can add at the top as blank space? Or is there an even easier method that I'm over-looking?

Thanks!

Edit to add HTML Here's the HTML for comparison:

<div class="container">

    <video autoplay muted loop class="video">
      <source src="./media/MockUpVid.mp4" type="video/mp4"/>
    </video>

</div>

Answer 1

.container {
  position: relative;
  margin-top: calc((100vh - 56vw)/2);
}

.video {
  opacity: .2;
  width: auto;
  vertical-align: middle;
  min-height: 60vh;
}

Using the aspect ratio we were able to achieve the desired layout.