Bootstrap5のみを使用した環境でvideoタグによる動画を画面いっぱいに表示する方法です。
videoタグをdivで囲って幅と高さ、positionを設定
いきなり結論ですが、videoタグをdivで囲って、そのdiv
・幅：100%
・高さ：100vh
・position:relative
を設定します。
必要に応じてoverflow-hiddenを設定します。
子要素のvideoには
・positon:absolute
を設定し、追加のCSSで
・min-width:100%
・min-height:100vh
を設定します。
<div class="w-100 vh-100 overflow-hidden position-relative video-wrapper">
<video class="position-absolute top-0 left-0" src="mov.mp4" muted autoplay loop></video>
</div>
.video-wrapper video{
min-width:100%;
min-height:100vh;
}
↧