css - 居中全屏视频

Question

我正在尝试让 HTML5 视频的行为完全像 background: center center fixed; background-size: cover; 元素而不使用 JS(我知道有 JS 库可以做到这一点)。我想出了如何根据窗口的纵横比与视频的纵横比将宽度或高度设置为 100%，使用媒体查询(下面的示例假设您使用的是 16/9 视频)。我现在剩下要做的就是让视频水平或垂直居中。

如有任何帮助，我们将不胜感激。

@media screen and (max-aspect-ratio: 16/9) {
  div#fixed video {
    position: absolute;
    height: 100%;
    z-index: -100;
  }
}

@media screen and (min-aspect-ratio: 16/9) {
  div#fixed video {
    position: absolute;
    width: 100%;
    z-index: -100;
  }
}

Answer 1

@media screen and (max-aspect-ratio: 16/9) {
  div#fixed video {
    position: absolute;
    height: 100%;
    z-index: -100;
    top: 0;
    bottom: 0;
    margin:auto 0;
  }
}

@media screen and (min-aspect-ratio: 16/9) {
  div#fixed video {
    position: absolute;
    width: 100%;
    z-index: -100;
    text-align: left;
    right: 0;
    left: 0;
    margin:0 auto;
  }
}