ビデオの背景がウェブページのコンテンツに表示されています

私はサイトを構築するために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

単にあなたが必要<source>タグを除いて、<video>タグに任意のコンテンツを挿入することはできません、と述べました。

ここで私はあなたのために、少量のサンプルがあります。

.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

ビデオの背景がウェブページのコンテンツに表示されています

答えて

関連する問題