视频背景显示在网页上的内容

我使用twitter引导来建立一个网站，我已经实现了一个视频背景。然而，视频似乎只是在页面上的内容（以及导航）。我试过z-index没有成功。这应该很容易，但我无法弄清楚发生了什么。 HTML和CSS的代码如下。视频背景显示在网页上的内容

<body class="background home"> 
    <video autoplay id="video-background" > 

    <source src="./video/beach.mp4" type="video/mp4" /> 

    <div class="container"> 
     <div class="header clearfix"> 
     <nav> 
      <ul class="nav nav-pills pull-left"> 
      <li role="presentation" class="active"><a href="index.html">home</a></li> 
      <li role="presentation"><a href="artists.html">artists</a></li> 
      <li role="presentation"><a href="#">releases</a></li> 
      <li role="presentation"><a href="#">contact</a></li> 
      </ul> 
     </nav> 
     <h3 class="text-muted"></h3> 
     </div> 

     <div class="jumbotron"> 
     <h1><img class="logo img-responsive" src="./images/elements-logo-bw-small.png" align="center"></h1> 
     <p class="lead">3Bridge Records was founded by Greg Cuoco and Eric Shans as a subdivision of 3Bridge Records to focus on the downtempo and ambient sides of electronic music. Our first releases can be found on all retail outlets. See below.</p> 

    </div> 



     <footer class="footer"> 

     </footer> 

    </div> <!-- /container --> 
    </video> 
    </body> 

/*CSS*/ 
video { 
    min-width:100% 
    min-height:100%; 
    height:auto; 
    width:auto; 
    background:url('../video/beach.mp4') no-repeat; 
    background-size:cover; 
    z-index: -100; 
    position: fixed; 
} 

.background.home { 
    background:url('../images/background-1.jpg'); 
    background-size: fixed; 
    background-repeat: repeat; 
} 

.background.artists { 
    background:url('../images/background-3.jpg'); 
    background-size: cover; 
    background-repeat: repeat; 
} 

.jumbotron { 
    background:none; 
} 

.jumbotron .logo { 
    margin:-50px auto 0 auto; 
} 

.jumbotron p { 
    color:#fff; 
    font-size:16px; 
    font-family: 'Montserrat', sans-serif; 
} 

.jumbotron .item { 
    margin:20px 0 0 30px; 
} 

.header.clearfix { 
    background: rgba(2, 0, 0, 0.2); 
} 

.nav > li >a { 
    color:#fff; 
    font-size:14px; 
    font-family: 'Montserrat', sans-serif; 
} 

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover { 
    color:#fff; 
} 

.nav-pills > li a:hover { 
    color:#000; 
} 

.row.marketing { 
    color:#fff; 
}

来源

2017-09-02 erics15

简单地说，你不能插入任何内容纳入<video>标签，除了需要<source>标签。

这里我有小样本给你：

.content{position:absolute; top:10%; left:10%; width:80%; height:80%; background:rgba(255,0,0,0.5);} 
 
.menu{position:absolute; top:10%; left:10%; width:80%; height:30px; background:green;} 
 
#video{width:200%; height:200%; position:absolute; top:-50%; left:-50%;} 
 
body{width:100%; height:100%; overflow:hidden;}

<video id="video" loop="" autoplay="" muted=""> 
 
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
 
</video> 
 
<div class="content"> 
 
<div class="menu"> 
 

 
</div> 
 
</div>

来源

2017-09-02 14:03:52 Zorak

谢谢你 - 我只是需要移动的内容上面的视频标签。欣赏帮助 – erics15

当然，很高兴帮助:)只是请，如果这解决了您的问题，标记这个答案被接受投票箭头:) – Zorak

视频背景显示在网页上的内容

回答

相关问题