0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Bootstrap5で動画を画面いっぱいに表示させる

Last updated at Posted at 2021-11-03

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;
}
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?