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;
  }
}

Answer 2

您甚至不需要媒体查询来实现这一目标：）

试试这个：

＆＃13;

#fixed {
    position: relative;
    height: 100vh;
    z-index: 0;
}
#fixed video {
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
}

＆＃13;

<div id="fixed">
	<video autoplay loop class="bg-video">
		<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4">
	</video>
</div>

＆＃13;

这里是working fiddle example。

希望有所帮助：）

以全窗口视频为中心

2 个答案: