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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我添加视频标题(chrome)时固定背景不起作用相关的知识,希望对你有一定的参考价值。

你可以在这里看到背景效果: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,但视频不再覆盖屏幕。

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

答案

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

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

以上是关于我添加视频标题(chrome)时固定背景不起作用的主要内容,如果未能解决你的问题,请参考以下文章

JS 中的 createTextNode 在 Chrome 中不起作用

Chrome:拥有 HTML5 视频位置:固定或绝对导致所有背景附件:固定中断

视频循环自动播放在 Chrome/safari 上不起作用(webkit 错误)

为啥 chrome 页面中的视频不起作用?

第一次删除规则然后再次添加时,css scroll-snap 不起作用(chrome)

html5 中的 hls 在 android chrome 浏览器中不起作用