我添加视频标题（chrome）时固定背景不起作用

Question

你可以在这里看到背景效果：https://jsfiddle.net/xorkme75/embedded/result/

背景是fixed在这里。因此，当您滚动页面时，您可以看到图像的其余部分。例如向下滚动，你可以看到女士的脸。

适用于chrome和firefox。

但是当我向头部添加视频时。此效果不再适用于chrome。这是一个例子（请参见chrome）：http://areafordemos.net63.net/chrome.html

我是怎么打破它的？

我添加到CSS：

#video-container {  
    top: 10%;
    width:100%;
    height:70%;
    overflow: hidden;
    z-index:-1; 
    }

video.fillWidth {
    width:100%;
    }

我添加到HTML：

<div id="video-container">
    <video autoplay muted loop paused class="fillWidth">
        <source src="xhttp://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"/>
        <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"/>
        Your browser does not support the video tag. I suggest you upgrade your browser.
    </video>
</div><!-- end video-container -->

CSS破区代码：

.dzen_bg {
background-image: url('http://seventhqueen.com/themes/kleo/sensei-e-learning/wp-content/uploads/sites/6/2015/06/hero16.jpg'); 
background-size: 100% 100%;
background-repeat: no-repeat; 
background-position: 100% 12px; 
background-attachment: fixed;
padding-top: 10px; 
background-size: 100% 100%;
} 

当我从width: 100%;删除video.fillWidth时，例如效果又回来但视频看起来并不像我想要的那样。所以我真的被卡住了。

到目前为止我尝试了什么？

我 - 我试图将z-index:-2;添加到.dzen_bg。它实际上解决了它。但另一个问题发生了。在那之后，我不能再徘徊在那个div .dzen_bg的内部了。不响应鼠标移动。

II-我删除了height: 70%中的#video-container。解决问题，但我现在如何设置视频高度？它现在覆盖了整个屏幕。我还尝试将height: 70%设置为video.fillWidth，但视频不再覆盖屏幕。

我从未对此感到困惑。这个问题有什么解决方案吗？

Answer 1

你的小提琴很好，你只需要稍微移动你的section。

我做了一个工作（与视频）fiddle这里是result