背景動画を画面いっぱいに表示させる方法

Question

背景動画をスマホで見たとき全画面に表示されるようにしたいのですが、めちゃくちゃ拡大されて表示されてしまいます。

   <div class="video-bg">
     <video class="video" src="" autoplay muted loop></video>
    </div>

.video-bg {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.video {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
}

【試したこと】
cssの.videoに、「min」の指定を外したら横幅ぴったり綺麗になるのですが、今度は上下に余白ができてしまいます。
またパソコンからchromeの検証ツールで確認すると上下の余白が出ているのですが、androidの実機で確認すると、左右に余白が出てしまいます。

【実現したいこと】
背景動画を画面いっぱいに表示させたいです。

よろしくお願いいたします。

Answer 1

こんな感じでどうでしょう？

<div class="main">
    <video id="bg-video" src="img\Main.mp4" poster="img\img.png"   autoplay muted loop></video>
</div>

#bg-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-size: cover;
    bottom:0;

ちなみにですが動画にはposter属性をつけたほうがいいです。動画が見れない場合(スマホなら外で見る可能性もあるため)

Comments

[Goethe]

回答ありがとうございます！

めちゃくちゃ拡大されて表示されてしまいます。

poster属性の件、ありがとうございます！
すごく参考になりました！

[Goethe]

横幅375pxで見たとき、mainが「横幅375px」になってるのに対して、bg-videoが「横幅1080px」になっています。bgvideoの横幅を制御できていない様子です。
ちなみに試しに「min-width: 375px;」の絶対指定をしてみましたが、それでも1080pxになっています。HTML,CSSは他に記述ありません。

この制御できない理由が分かりません

[Ftps]

横幅がおかしいということでしょうか？
一応私の環境では横幅、縦幅ぴったしに動画が流せる状態です(一部がかくれてしまうが)
横幅が1080pxになるというのは、全画面表示になっていないということでしょうか？

[Goethe]

全画面表示になっておらず、一部のみトリミングされたような状態になってしまいます。
使ってるファイル形式がm4vなのですが、試しにmp4の同じような動画でやってみたら上手くいきました。
動画ファイルに問題があるということでしょうか？
また動画ファイルを普通に開くと、特に問題なくspサイズ版の動画が流れます。

[Goethe]

以下のコードで拡大表示は解決されました。
調べて試しにコピペしてみたらなったというだけなので、何が原因だったかは分かっていません。。。

<div class="video-container">
<div class="video-wrap">
<video src="" type="v" playsinline loop autoplay muted>
</video>
</div>
</div>

.video-container {
margin: 0 auto;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

.video-wrap {
position: fixed;
z-index: -999999;
overflow: hidden;
width: 100%;
height: 100vh;
background: url(img/video.jpg) no-repeat center center/cover;
}

video {
min-width: 100%;
min-height: 100vh;
position: absolute;
}

/*画面サイズが変わっても常に動画の中央が表示されるようにする*/
/*動画よりも画面が横に長くなるとき用*/
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
video {
width: 100%;
top: 50%;
transform: translateY(-50%);
}
}

/*動画よりも画面が縦に長くなるとき用*/
@media (max-aspect-ratio: 16/9) {
video {
height: 100%;
left: 50%;
transform: translateX(-50%);
}
}

[Goethe]

ただ上記コードだと、動画ファイルを超える横幅（600pxくらい）になると、それ以降は左右に余白が出てしまいます。動画が横に伸びでも構いませんので、横幅に動画サイズも大きくなるような記述はできないでしょうか？

[Ftps]

可能ならスクリーンショットを添付してください。一応m4vもhtmlは対応してるはず...