コンテンツの高さに基づくマージントップの変更

Question

私は100％の幅にわたる、ページ上のフォールドの上に背景として使用しているビデオを持っています。私はビデオがにあることをほぼのページの中心点にしたい。私は最高の選択肢は、VHを使用する行に沿って何かに高さを設定することだったと思った。しかし、大きな画面になると、ビデオ自体の幅が大きくなるため、ビデオの高さも大きくなり、ボトム全体が途切れてしまうことに気付きました。

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

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

ビデオの高さが何であるか、どのその後、私は私が先頭に追加することができますどのくらいのパディングを把握するために使用できる方法を見つけ出すための方法があります：

この

は私が持っているものです空白として？または、私が見過ごしているより簡単な方法がありますか？

ありがとうございます！

編集HTML を追加するためにここで比較のためのHTMLです：私たちは希望のレイアウトを達成することができましたアスペクト比を使用して

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

が。