Erstellen Overlay auf Video in Bootstrap

Question

Ich versuche, ein Video als Hintergrund in einem div zu verwenden, und ich kann es nicht geschafft den Inhalt Video Overlay div anzuzeigen ..

Hier ist mein HTML:

Ihr Browser unterstützt das Video-Tag nicht. Ich schlage vor, Sie aktualisieren Ihren Browser.

<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--> 

Und hier ist mein 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; 
} 

Ich habe kein Glück z-index tryed verwenden, hier ist ein Link zu codepen:

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

Vielen Dank vor Hand.

Answer 1

Hier ist das Working Fiddle

ist das, was das Problem war ist, dass Sie pseudo elements für overlaying nicht Opazität zu verwenden, und auch die zweiten section mit position:absolute und den ersten section mit position:relative verwenden, so dass die zweite section kommt an der Spitze der ersten section dann die z-index wird funktionieren, wie Sie wollen.

HTML

Wrapped Ihre video in einem 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; 
} 

Danke