背景に動画を設置し、パララックス風にしたいです

Question

### 前提・実現したいこと

制作中のホームページにてトップイメージ（動画）を背景にしたいと思っています。
パララックス風にしたくスクロールするとトップが隠れるという仕組みにしたいです。
イメージとしては下記のURLのような感じです。
https://webnooboegaki.com/demo/parallax2
こちらの参考はスクロールするとトップが隠れる様子を伝えたかったので
コーディングの参考にはしてません。

発生している問題

動画の配置までは行けたのですが、制作したいのは参考URLとは違い、
画面幅を小さくしたときも動画の横幅が常に画面幅いっぱいになるようにしたいのです。
しかしwidth: 100vwにしているとウィンドウ幅が縮むと下にだんだん余白が出てきてしまいます。
（上記画像の赤矢印部分の余白を無くしたい）
こちらの余白を出さないために良い方法がありましたら、ご協力をお願い致します。

<div class="top">
      <video src="img/top.mp4" autoplay muted loop></video>
  </div>
   <main>
    |
    |
    |
   </main>

.top video{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-width: 1000px;
    width: 100%;
    z-index: -100;
}

.main {
    max-width: 1980px;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
    top: 1000px;
    z-index: -1;
}

Comments

[m.ts10806]

参考先があるのでしたら、コード解析持ってくるという選択肢があるかと思いますが、
どの程度参考にしたのでしょうか。
ビデオの見せ方とか違うようですけど。

[wataneko17]

ご指摘頂きありがとうございます。
参考URLはスクロールで隠れる様子を伝えたかったため、コーディングの参考にはしてません。
追記で説明画像を追加しましたので、よろしければそちらを見ていただけると助かります。

[Lhankor_Mhy]

動画は置換要素なので、CSSでコントロールしにくいです。
たとえば、YouTubeはobject-fitを使ってもプレイヤーがフィットするだけで動画はフィットしなかったかと思います。

確実に対応するなら、JavaScriptで制御するしかないかな、と思います。

[kuma_kuma_]

動画の比率じゃなくて画面の比率に合わせたいのね

他の方も書かれている通り
videoタグで画面いっぱいレスポンシブな動画を設置する方法
https://qiita.com/drasky1132/items/93ab71742175914e61cb

こんな方法になるよ？

[wataneko17]

Lhankor_Mhy様、kuma_kuma_様
ご意見いただき誠にありがとうございます。
参考にさせていただきます。
やはりJavaScriptで組んだほうが良いのですね。
参考でいただいたURLを見ながらやったのですがあまりうまくいきませんでした、、、
もう少し考えてみます。