Question

我希望以100％宽度和自动高度显示响应式html5视频，使其上方的空间等于所有屏幕和设备上方的空间。这是我的代码。

＆＃13;

body,
video {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

video {
  width: 100%;
  height: auto;
}

＆＃13;

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

＆＃13;

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

Answer 1

您可以通过以下方式集中使用flexbox CSS来实现此目的：

＆＃13;

html {
  height: 100%;
}

body {
  background-color: black;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
}

video {
  width: 100%;
  height: auto;
}

＆＃13;

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

＆＃13;

Answer 2

看看at how bootstrap achieves this.他们使用包装div来控制尺寸，并将视频设置为绝对定位，宽度和高度均为100％。它比Jon的解决方案更灵活一些，尽管它可以做你想要的。

如何制作宽度为100％的html5视频居中对齐

2 个答案: