HTMLでの動画全画面表示について

トップページに動画を設置しようと思いいろいろと試しています。
動画の表示を画面一杯に隙間なくさせたいのですが、なかなかうまくいきません。

今現在の動画サイズが3840 x 2160で、
動画のファイルサイズは、MP4ファイルが16MB, Webmファイルが8MBです。

html
1<div class="background">
2　<video class="video-wrapper" poster="image/video.jpg" autoplay loop>
3　　<source src="video.mp4" type="video/mp4">
4　　<source src="video.webm" type="video/webm">
5　</video>
6</div>

css
1.background {
2  width: 100%;
3  height: 100vh;
4}
5
6.video-wrapper {
7  width: 100%;
8  height: 100%;
9}

今のままだと縦の幅は100vhで整うのですが、
横の幅がうまく画面一杯まで伸びてくれません。

今はまだ実験としてトップページに動画を貼り付けようとしているだけですので、CSSはこの2つの他にはまだ何も書いてはいません。

この場合他に何かいい方法がありますでしょうか？

それと、ページを開くタイミングによって動画が表示される時とされない時があります。
その為、動画が表示されるまで何度もリロードしています。
こういった事がなぜ起こるのかがお分かりになる方はいらっしゃいますでしょうか？
また、改善方法などもご存じの方がいらっしゃいましたら非常にありがたいのですが。

m.ts10806

2019/01/25 01:48

動画のファイルサイズは如何程でしょうか

退会済みユーザー

2019/01/25 02:53

> 横の幅がうまく画面一杯まで伸びてくれません開発者コンソールなどから、他のCSSが影響しているかもしれないので、どのようにCSSが当てられているか確認してみてください。 > 動画が表示される時とされない時があります同じく開発者コンソールなどから、正しく動画のリソースがダウンロードされているか確認してみてください。ファイルサイズが大きすぎて、ダウンロードの途中だとか、コケてるという可能性もあります。

yokoyama_takuzo

2019/01/25 05:47

動画のファイルサイズは、MP4ファイルが16MB, Webmファイルが8MBです。 WindowsでGoogle Chromeを使用しています。今はまだ実験としてトップページに動画を貼り付けようとしているだけですので、CSSはこの2つの他にはまだ何も書いてはいません。もしこれ以外にもいい方法があればとてもありがたいのですが。

退会済みユーザー

2019/01/26 10:39

ブラウザCSSというものがあってだな・・・・何も書かないでも勝手に設定してくれる困り物

yokoyama_takuzo

2019/01/27 06:04

なるほど、ありがとうございます。一応 @media screen and (-webkit-min-device-pixel-ratio: 0) {} こういったものを足してみたり、bodyにmarginやpaddingを0pxにしたりして余計な空白は無くしてみたりはしているのですが全く状況が変わりません。動画の表示を画面一杯に表示するだけなので簡単かと思いきやなかなかうまく出来ず、他のブラウザで試してみても状況が変わらないため困っています。