html - 添加视频标题时固定背景不起作用(chrome)

Question

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

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

同时适用于 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 -->

splinter 区域的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%;
} 

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

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

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

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

我从来没有这么困惑过。这个问题有解决办法吗？

Answer 1

你的 fiddle 很好，你只需要将你的部分向下移动一点。

我做了一个工作(带视频)fiddle这是 result