このように、video要素に対して、position: absolute
、top: 50%
、left: 50%
、transform: translate(-50%, -50%)
を指定することで、画面中央に表示させることができます。
また、html、body要素に対して、overflow: hidden
、cursor: default
、height: 100%
を指定することで、スクロールバーを消し、カーソルを消し、全体を表示することができます。
また、フルスクリーン表示にも対応できるようになります。
video {
min-width: 100%;
min-height: 100vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
html, body {
overflow: hidden;
cursor: default;
height: 100%;
}
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" loop autoplay muted playsinline></video>
このように、video要素に対して、position: absolute
、top: 50%
、left: 50%
、transform: translate(-50%, -50%)
を指定することで、画面中央に表示させることができます。
また、html、body要素に対して、overflow: hidden
、cursor: default
、height: 100%
を指定することで、スクロールバーを消し、カーソルを消し、全体を表示することができます。
また、フルスクリーン表示にも対応できるようになります。