javascript - 如何制作 100% 宽度垂直居中对齐的 html5 视频

Question

我想显示一个具有 100% 宽度和自动高度的响应式 html5 视频，以便在所有屏幕和设备上其上方的空间等于其下方的空间。这是我的代码。

body,
video {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

video {
  width: 100%;
  height: auto;
}

<video controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>

我尝试通过不同的想法(例如设置边距)来实现这一点，但都失败了。如有必要，我愿意使用 javascript/jquery/plugins。

Answer 1

您可以像这样通过 flexbox CSS 居中来实现这一点:

html,
body {
  height: 100%;
}

body {
  background-color: black;
  display: flex;
  margin: 0;
}

video {
  margin: auto;
  width: 100%;
}

<video controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>