Создание наложения на видео в загрузчике

Question

Я пытаюсь использовать видео в качестве фона в DIV и я не могу управлять, чтобы отобразить содержимое видео с наложением на Div .. В

Вот мой 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

Вот Working Fiddle

Дело в том, что делал этот вопрос в том, что вы должны использовать pseudo elements для overlaying не непрозрачности, а также использовать второй section с position:absolute и первый section с position:relative, так что второй 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; 
} 

Thanks