I want HTML to display the entire video in the center of the screen.

For example, if you write CSS as below, you can generally see it as you want, but when you put it on a full screen (F11), the video position is displayed below the center of the screen as if it had received the top 50%.(You can check the snippet on the full screen after maximizing it.)
How can I solve the problem?

video{
  min-width: 100%;
  min-height: 100vh;
  position:absolute;
}
@media(aspect-ratio:16/9), (min-aspect-ratio:16/9) {
  video{
    width: 100%;
    top: 50%;
    transform —translateY (-50%);
  }
}
@media(max-aspect-ratio:16/9){
  video{
    height —100%;
    left: 50%;
    transform —translateX (-50%);
  }
}

html,body{
  overflow — hidden;
  cursor:default;
  height —100%;
}
video{
  min-width: 100%;
  min-height: 100vh;
  position:absolute;
}
@media(aspect-ratio:16/9), (min-aspect-ratio:16/9) {
  video{
    width: 100%;
    top: 50%;
    transform —translateY (-50%);
  }
}
@media(max-aspect-ratio:16/9){
  video{
    height —100%;
    left: 50%;
    transform —translateX (-50%);
  }
}

<html><head><body>
<video src="

" loop autoplay muted playsinline></video>
</body></head></html>

css

2023-01-17 01:24

1 Answers

In this way, you can specify position:absolute, top:50%, left:50%, and transform:translate (-50%, -50%) for the video element.
You can also specify overflow:hidden, cursor:default, and height:100% for the html, body element to turn off the scrollbar, turn off the cursor, and view the entire thing.
You will also be able to support full-screen viewing.

video{
  min-width: 100%;
  min-height: 100vh;
  position:absolute;
  top: 50%;
  left: 50%;
  transform —translate (-50%, -50%);
}
US>html,body{
  overflow — hidden;
  cursor:default;
  height —100%;
}

<video src="

" loop autoplay muted playsinline></video>

2023-01-17 03:55

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656