Skip to main content
本文から 4 文字削除
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64

このように、video要素に対して、position: absolutetop: 50%left: 50%transform: translate(-50%, -50%)を指定することで、画面中央に表示させることができます。
また、html、body要素に対して、overflow: hiddencursor: defaultheight: 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: absolutetop: 50%left: 50%transform: translate(-50%, -50%)を指定することで、画面中央に表示させることができます。
また、html、body要素に対して、overflow: hiddencursor: defaultheight: 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: absolutetop: 50%left: 50%transform: translate(-50%, -50%)を指定することで、画面中央に表示させることができます。
また、html、body要素に対して、overflow: hiddencursor: defaultheight: 100%を指定することで、スクロールバーを消し、カーソルを消し、全体を表示することができます。
また、フルスクリーン表示にも対応できるようになります。

このように、video要素に対して、position: absolutetop: 50%left: 50%transform: translate(-50%, -50%)を指定することで、画面中央に表示させることができます。
また、html、body要素に対して、overflow: hiddencursor: defaultheight: 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>

装飾しました
ソース リンク
nekketsuuu
  • 2.4万
  • 12
  • 53
  • 117
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 {
  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%)"position: absolutetop: 50%left: 50%transform: translate(-50%, -50%)を指定することで、画面中央に表示させることができます。
また、html、body要素に対して、"overflow: hidden"、"cursor: default"、"height: 100%"overflow: hiddencursor: defaultheight: 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要素に対して、"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: absolutetop: 50%left: 50%transform: translate(-50%, -50%)を指定することで、画面中央に表示させることができます。
また、html、body要素に対してoverflow: hiddencursor: defaultheight: 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要素に対して、"position: absolute"、"top: 50%"、"left: 50%"、"transform: translate(-50%, -50%)"を指定することで、画面中央に表示させることができます。
また、html、body要素に対して、"overflow: hidden"、"cursor: default"、"height: 100%"を指定することで、スクロールバーを消し、カーソルを消し、全体を表示することができます。
また、フルスクリーン表示にも対応できるようになります。