使用HTML5创建带有视频背景的部分

Question

我是一个有用的助手，可以翻译文本。

我正在尝试模仿lumosity.com的首页，但我无法将视频背景设置为该部分。我已经完成的工作如下：

HTML

<section id="banner">
   <video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
     <source src="https://static.lumosity.com/resources/home_page_templates/574/neuralnetwork.mp4" type="video/mp4">
     <source src="movie.webm" type="video/webm">
          Sorry, your browser does not support HTML5 video.
    </video>
    <p>This is text that is in front of video, we do not want the z-index of video to be greater than content. Hence background!
    </p>
 </section>

CSS

#videobcg { 
     position: absolute;
     top: 0px;
     left: 0px;
     padding: 5em 2em 4em 2em;
     z-index: -1000;
     overflow: hidden;
}

正如您所见，我的代码无法正常工作，视频仍然隐藏在网页的某个地方。有什么想法吗？

- IAmAlfred

---

http://codepen.io/dudleystorey/pen/knqyK - Brino

这是一个工作示例：https://jsfiddle.net/v9whp8m0/ - Alessander França

Answer 1

我使用了这个作为示例，并修改了您的CSS。

示例1：将视频作为包含div的背景

在此示例中，视频仅作为包含div的背景播放，类似于lumosity.com：

JSFIDDLE 1

#banner {
    position: relative;
    height:300px;
    width:100%;
    overflow: hidden;
}
#videobcg {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    height:auto;
    width:auto;
    z-index: -100;
}

示例2：将视频作为全屏背景

JSFIDDLE 2

#videobcg {
    position: absolute;
    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;
}

- Brino

Answer 2

我使用BIGVIDEO.JS来实现视频背景：

HTML

<div class="background-image-hide parallax-background video-wrap" data-video-wrap="images/slides/video.mp4" data-img-wrap="images/slides/video.jpg">
</div>

JS

var bigVedio = function() {
                // initialize BigVideo
                var BV = new $.BigVideo({
                        container: $('.video-wrap'),
                        forceAutoplay: isTouch
                    }),
                    V = $('.video-wrap').attr('data-video-wrap'),
                    img = $('.video-wrap').attr('data-img-wrap');
                if (typeof V != typeof undefined) {
                    if (!isTouch) {
                        BV.init();
                        BV.show(V, {
                            ambient: true,
                            doLoop: true
                        });
                    } else {
                        BV.init();
                        BV.show(img);
                    }
                }
            };

CSS

.background-image-hide {
  position: absolute;
  top: -30px;
  height: 150%;
  width: 100%;
  background-size: cover !important;
  z-index: 0;
  background-position: 50% 50%;
}

希望这能对你有所帮助。

- Adel