Question

我想让我的视频在我的网站背景中播放，但出于某种原因，它会占据网站上所有其他内容。我不知道最近发生了什么。

CSS

＆＃13;

.fullscreen {
    position:static;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow:hidden;
    z-index: -100;
             }

.fullscreen-vd {
    position:absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media (max-width: 0px) {
    .fullscreen {
        background: url('gif.mp4') center center / cover no-repeat;
    }
    .fullscreen-vd {
        display: none;
    }
}

＆＃13;

HTML

＆＃13;

<div class="fullscreen">
            <video loop autoplay muted poster="IMG_25062017_221924_0.png" class="fullscreen-vd">
    <source src="gif.mp4" type="video/mp4">
    </video>
        </div>

＆＃13;

Answer 1

尝试更新一些css部分并删除一些部分以获取它，并且您没有任何width和height视频，因此我使用了100% height和width视频。

如果您使用固定的height和width视频，请使用fullscreen-vd课程将center vertically和horizontally与视频对齐

我发布了一个工作片段，希望它能为您提供帮助。

<强> As your requirement fiddle link

body,
html {
  width: 100%; /* For take full height and width */
  height: 100%;
}

.fullscreen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
  width: 100%;
  height: 100%;
}

/* NO NEED BECAUSE YOUR VIDEO IS OCCUPY FULL HEIGHT AND WIDTH */

/* .fullscreen-vd {
    position:absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
} */

.content {
  color: #fff;
  text-align: center;
}

@media (max-width: 0px) {
  .fullscreen {
    background: url('gif.mp4') center center / cover no-repeat;
  }
  .fullscreen-vd {
    display: none;
  }
}

<div class="fullscreen">
  <video width="100%" loop autoplay muted poster="IMG_25062017_221924_0.png" >
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/webm">
</video>
</div>
<div class="content">
  <h1>
    HELLO
  </h1>
</div>

我似乎无法让我的背景视频在后台播放

1 个答案: