親要素に対し、VIDEOタグを画面いっぱいに表示する

背景に動画を流しておきたいときなどで、VIDEOタグを画面いっぱいに広げたい時の手法

HTML

<div class="wrap">
    <video src="example.mov" autoplay loop playsinline muted></video>
</div>

CSS

.wrap { position.relative; width:100%; height:100%; }
video { position:absolute; left:50%; top:50%;  min-width:100%; min-height:100%; transform:translate(-50%,-50%); }

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です