トップページに動画を設置しようと思いいろいろと試しています。
動画の表示を画面一杯に隙間なくさせたいのですが、なかなかうまくいきません。
今現在の動画サイズが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つの他にはまだ何も書いてはいません。
この場合他に何かいい方法がありますでしょうか?
それと、ページを開くタイミングによって動画が表示される時とされない時があります。
その為、動画が表示されるまで何度もリロードしています。
こういった事がなぜ起こるのかがお分かりになる方はいらっしゃいますでしょうか?
また、改善方法などもご存じの方がいらっしゃいましたら非常にありがたいのですが。