Question

我正在尝试使用html5视频作为单个整页网站的背景，但是在Chrome中，视频最初会加载到所有内容之上，直到用户尝试滚动。

CSS的样式位于

之下

video#bgvid { 
position: fixed; 
right: 0; 
bottom: 0;
min-width: 100%; 
min-height: 100%;
width: auto; 
height: auto; 
z-index: -1000;
background: url(../images/video-fallback.jpg) no-repeat;
background-size: cover; 
}

关于如何在网站上布置内容的示例（bg设置为透明色，因此内部内容位于其外部）

.header-bg {
width: 100%;
height: 150px;
background-color: #000;
z-index: 5;
position: absolute;
top: 0;
left: 0;
opacity: .7;
    -webkit-opacity: .7;
        -moz-opacity: .7;
}

header {
position: relative;
z-index: 10;
width: 100%;
height: 150px;
text-align: center;
}

HTML

<video autoplay loop poster="images/video-fallback.jpg" id="bgvid">
    <source src="teaser.mp4" type="video/mp4">
    <source src="teaser.ogv" type="video/ogg">
</video>


<div class="header-bg"></div>

<header>
    <img src="images/logo.png">
</header>

有关视频加载在Chrome内容之上的原因吗？

HTML5视频作为背景

0 个答案: