ここ</p> <p>..私はdivの背景としてビデオを使用しようとしていますし、私はdiv要素のコンテンツビデオオーバーレイを表示するように管理することはできませんブートストラップ

Question

でビデオのオーバーレイを作成しますが、私のHTMLです：

お使いのブラウザでは、ビデオタグはサポートされていません。私はあなたのブラウザをアップグレードすることをお勧めします。

<div class="container text-center"> 
     <h1>Personal Portfolio</h1> 
     <p>Graphic design, Web developement & Social Media</p> 
     <img class="image-responsive" src="https://s32.postimg.org/qrpva9fed/profile.jpg" style="border-radius:50%; width:15%"> 
    </div><!-- End container --> 
</div><!-- End jumbotron--> 

そして、ここに私のCSSです：

.jumbotron{ 
    position: relative; 
    overflow: hidden; 
} 
.container .text-center{ 
    z-index: 1000 !important; 
} 
#video-background { 
    position: absolute; 
    background: #222; 
    width:100%; 
    background-size: cover; 
    transition: 1s opacity; 
    opacity: 0.7; 
    top: 0; 
    left: 0; 
} 

私は運でのzインデックスを使用しようと試みてきた、ここcodepenへのリンクです：

https://codepen.io/Alique/pen/JKRxZd

多くのおかげで前にハンド。ここで

Answer 1

は、問題を作っていたものは、あなたがoverlayingない不透明のためpseudo elementsを使用しなければならないことであり、またそのようにposition:absoluteとposition:relativeとの最初sectionで二sectionを使用Working Fiddle

です2番目のsectionが最初のsectionの先頭にある場合、z-indexは必要に応じて機能します。

HTML

包まれたあなたのvideoのdiv内

<div class="video-background"> 
<video autoplay="" loop="" class="fillWidth fadeIn animated" poster="https://s3-us-west-2.amazonaws.com/coverr/poster/Traffic-blurred2.jpg" id="video-background"> 
<source src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Traffic-blurred2.mp4" type="video/mp4">Your browser does not support the video tag. I suggest you upgrade your browser. 

CSS

.jumbotron{ 
    position: relative; 
    overflow: hidden; 
    padding:0px !important; 
} 
.container .text-center{ 
    z-index: 1000 !important; 
} 
.video-background:before{ 
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
position: absolute; 
content: ""; 
background-color: #000; 
opacity: 0.39; 
z-index: 6; 
} 
.video-background { 
    position: relative; 
background: #222; 
width:100%; 
z-index:5; 
    } 
#video-background{ 
background-size: cover; 
transition: 1s opacity; 
} 

.cover-text{ 
position:absolute; 
width:100%; 
text-align:center; 
z-index:9999; 
top:5em; 
} 

.cover-text h1, .cover-text p{ 
color:#fff !important; 
} 

ありがとう