作为背景视差的视频 CSS

Question

我是后端而不是前端，所以如果你认为我的问题是假的，很抱歉，但我找不到答案:)

我的目标是使用 CSS. 制作具有视差的背景视频。总的来说，我确实做到了，但结果还不够好。由于某种原因，背景视频在所有部分下，而不是只在应该在的部分中...

HTML:

<div class="fullScreenPhoto"></div>
<div class="video-container">
  <video autoplay poster="" class="video-parallax" loop muted>
    <source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/webm">
    <source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/mp4">
  </video>
</div>

<div class="fullScreenPhoto2"></div>

<div class="fullScreenPhoto3"></div>

CSS:

body{
  margin: 0;
  padding:0
}

.fullScreenPhoto{
  width: 100%;
  margin:0;
  height:300px;
  background-color: red;
}

.fullScreenPhoto2{
  width: 100%;
  height:300px;
    margin:0;
  background-color: green;
}
.fullScreenPhoto3{
  width: 100%;
    margin:0;
  height:300px;
  background-color: yellow;
}

video {
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}

.video-container {
    height: 600px;
}

.video-parallax {
    -webkit-transition-position: fixed;
    position: fixed;
}

在这里您可以fiddle： Fiddle

我在哪里重复了我的问题。如果您要隐藏一个部分，或将 z-index 更改得更高，您会看到该视频遍布整个页面...

顺便说一句。我知道插件 jQuery -> https://github.com/linnett/backgroundVideo，但我只想使用 CSS。

Answer 1

您需要为 video 元素设置 css height，或者像 <video height="400"> 这样的元素本身。 Updated Fiddle.

Answer 2

如果你想让视频只作为这个 div 的背景，那么你就不能有视差效果，因为你需要为 .video-parallax 移除 position: fixed（所以所有样式对于这个 class 如我所见）并将 video 的样式更改为：

video {
    margin:0 auto;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-size: cover;
    transition: 1s opacity;
}

Answer 3

您可以像处理图像视差一样轻松地做到这一点。

HTML:

<div class="ParallaxVideo">
  <video autoplay muted loop>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  </video>
  <h1>Video Background</h1>
</div>

CSS

.ParallaxVideo{ 
    height: 300px;
    padding-bottom: 50px;
    padding-top: 50px; 
}
.ParallaxVideo video{ 
    min-width: 100%;
    position: fixed;
    top:0;
    z-index: -999;
}
.ParallaxVideo h1 {
  color: #fff;
  font-size: 76px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

您也可以查看本教程了解更多详情：

https://codeconvey.com/video-parallax-background-using-css3/

这是演示版本：

http://codeconvey.com/Tutorials/VideoParallaxBackground/

Answer 4

为此，我正在使用 Materialise CSS。这很简单。我们想要一个视频作为背景视差 CSS.

HTML 带实体化 CSS

 <style>
 #anyvideo{
        position: absolute;
        right: 0;
        bottom: 0;
        min-width: 10%;
        min-height: 100%;
       }
</style>

<div class="video-container parallax-container">
    <video autoplay muted loop id="anyvideo">
        <source src="somevideo.mp4" type="video/mp4">
    </video>
</div>

我们还可以让我们的视频响应，即相应地调整屏幕大小。

<div class="video-container parallax-container">
    <video autoplay muted loop id="anyvideo" class="responsive-video">
        <source src="somevideo.mp4" type="video/mp4">
    </video>
</div>

在上面的代码中仅 class="responsive-video" 添加了视频响应。

作为背景视差的视频 CSS

Video as background parallax CSS

html

css

video

parallax