ミギムキ

[CSS] videoタグを縦横比は維持しながら全画面表示したい

サンプルコード

html

<div class="video_wrapper"> <video autoplay muted playsinline loop> <source src="xxx.mp4" type="video/mp4"> <img src="xxx.png"> </video> </div>
スポンサー広告

CSS

.video_wrapper { position: relative; width: 100vw; height: 100vh; overflow: hidden; } .video_wrapper > video { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; }

サンプルコードの解説

.video_wrapper { position: relative; width: 100vw; height: 100vh; overflow: hidden; } .video_wrapper > video { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; }

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。

スポンサー広告