videoをwidthでなくheightに合わせ上下の黒フレームをなくしたい

Question

ウェブサイトを作っており、トップにvideoを載せています。
iphoneの時だけ、動画が横幅100％に合わせて上下部分が黒フレームはいります。
高さをいっぱいにし、横幅ははみ出てもよいようにしたいのですが、、
Andoroidでは問題なしです。
いろいろ調べてみましたが、うまくいきません、、
検討つく方いらっしゃいましたら、ぜひ教えてください。

<section id="top">
   <video src="img/test.mp4" muted autoplay loop playsinline poster="img/test.jpg"></video>
</section>

#top{
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  video{
    min-width: 100%!important;
    height: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../img/digital.jpg);
  }
}

Comments

[kei344]

「CSS」と書かれていますが、SASSやSCSSではありませんか？

[nana_ton]

そうでした！すいません、修正いたします。

Answer 1

videoタグ内のposter属性を消去すると、縦幅に合わせて動画サイズが調整されました。

posterが使えなくなりましたが、これでいきます、、