レスポンシブサイトで動画の高さを画面幅に収まるように指定したい

Question

前提・実現したいこと

レスポンシブサイトを作っていて、TOPページのファーストビューに
動画を指定しているのですが、高さの指定の方法がわかりません。
mp4ファイルの大きさが「1280 × 720」です。(こちらをリサイズする必要があるのでしょうか?)

例:http://cafestudiobakery.tokyo/
例のサイトのように開いているウインドウの画面幅に合わせて、
動画が収まるように設定したいのですが、高さの指定方法がわかりません。
padding-bottom: 56.25%;の数字を変えると、隙間が生まれてしまいます。

該当のソースコード

<div class="video-container">
  <video autoplay poster="img/bg.jpg" muted>
    <source src="a.mp4" type="video/mp4">
  </video>
  <div id="scrolldown">
    <a href="#b">
      <span>
      </span>Scroll
    </a>
  </div>
</div>

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Answer 1

私はvideoタグを使った事がないのですが、参考になりそうなので貼っておきます。
お役に立てれば幸いです。（2016年12月の記事なので古いかもしれません。）

videoタグで画面いっぱいレスポンシブな動画を設置する方法

Comments

[退会済みユーザー]

返信が遅くなり申し訳ありません。回答ありがとうございました。
こちらのサイトを参考にしましたが、私の質問の仕方が悪かったようです。
上に固定ナビを付けていて、ナビに高さを指定していたので、
動画が画面に収まらないようです。ナビを動画に被せたら解決しました。