CSS固定视频背景div，带固定页脚

我试图把一个视频作为一些网站的背景，这可能是任何其他复杂的div内容用作背景。问题是，它应该是一个“位置：固定”的一个，以及页脚这是要求-页脚不应与滚动移动。我已经挣扎了好几个小时，但仍然无法实现这一切——当主要内容大于窗口大小时，滚动显示问题，就像小提琴一样：

代码如下： css:

html:

---

有什么想法吗？谢谢

在本例中，我在您的视频容器中添加了一个图像，但可以轻松地将其更改为您需要的任何内容。它也很灵敏

例如：

如果您使用的是视频，您可能希望使用全屏视频js插件，以便轻松实现跨浏览器兼容

HTML

---

谢谢你的回答！我在这里发布了一个简化版，实际页面中的实际问题是嵌入视频的尺寸参数错误+使用z-index的游戏过于复杂。z-index功能强大，易于使用。请记住，使用z索引的元素必须始终包括定位，即位置：相对和从最低到最高的堆栈。

* { margin:0; padding:0}
html, body {
    height: 100%;
    width: 100%;
}
#main {
    position: relative;
    min-height: 100%;   
    height: 100%;
    background-color: rgba( 245, 245, 245, 0.75);
}
#wrappedContent {
    padding-bottom: 40px;
}

#videoBG {
    position: fixed;
    bottom: 40px;
    top: 0px;
    background-color: #f00;
    width: 100%
}

footer {
    height: 40px;
    margin-top: -40px;
    position: fixed;
    background-color: #00f;
}

<div id="videoBG"></div>
<div id="main">
    <div id="wrappedContent">
        some big block of content<br>
        it should have the videoBG layer<br>
        under it and fixed - scrolling should not affect the videoBG <br>
        position and its height should be <br>
        equal to the window-height without the footer<br>
        but as you can see - it is not - the red BG is far longer than it should<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
    </div>
</div>
<footer>
    footer content
</footer>

<div id="videoBG"><img src="http://lorempixel.com/400/300/"></div>
<div id="main">
    <div id="wrappedContent">
        some big block of content<br>
...the rest of your html

* { margin:0; padding:0}
html, body {
    height: 100%;
    width: 100%;
}
#main {
    position: relative;
    min-height: 100%;   
    height: 100%;
    background-color: rgba( 245, 245, 245, 0.75);
}
#wrappedContent {
    padding-bottom: 40px;
}

#videoBG {
    position: fixed;
    top: 0px;
    bottom: 40px;
    width: 100%;
    height: 100%;
}
#videoBG img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

footer {
    position: fixed;
    margin-top: -40px;
    height: 40px;
    width: 100%;
    background-color: green;
}