Bootstrap video jumbotron

Question

Я пытаюсь получить видеоролик для обложки бутстрапа Jumbotron без успеха. Это кажется очень простой задачей, но все, что я пытаюсь, кажется, терпит неудачу.

Я пробовал решение опубликовано here без каких-либо успехов. Я также попытался установить абсолютное положение видео и установить все стороны на 0, но это тоже не работает. Что я делаю не так?

Это показывает, что происходит: https://jsfiddle.net/kae4q601/

.jumbotron{ 
 
    position: relative; 
 
    
 
    /* Tried setting the height. Didnt work either */ 
 
    /* height: 200px; */ 
 
} 
 

 
#video-background { 
 
    position: absolute; 
 
    bottom: 50%; 
 
    right: 50%; 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -1000; 
 
    overflow: hidden; 
 
}

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="jumbotron"> 
 
    <video id="video-background" preload muted autoplay loop> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> 
 
    </video> 
 
    <div class="container"> 
 
    Hello World 
 
    </div> 
 
</div>

Answer 1

Похоже, у вас есть много ненужных CSS происходит. Для начала я определенно определял бы z-index jumbotron, чтобы сохранить серое дополнение в фоновом режиме.

.jumbotron{ 
    position: relative; 
    z-index:-101; 
} 

Следующий некоторый уборщик проще код для видео-фона, как так:

#video-background { 
     position: fixed; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     overflow: hidden; 
     z-index: -100; 
     width:100%; 
} 

Вот скрипка https://jsfiddle.net/kae4q601/5/ Дай мне знать, если это то, что вы пытаетесь достичь.

Answer 2

С .jumbotron имеет серый фон, установка фонового изображения видео z-index: -1000; сделает видеоизображение за серым фоном, тем самым невидимым. Кроме того, при создании обложки видеоролика родитель должен иметь overflow:hidden, а не сам видео.

CSS:

.jumbotron{ 
    position: relative; 
    overflow: hidden; 
    height: 200px; 
} 

.container { 
    position: relative; 
    color: #ffffff; 
    z-index: 2; /* Show content above video */ 
} 

#video-background{ 
    position: absolute; 
    height: auto; 
    width: auto; 
    min-height: 100%; 
    min-width: 100%; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate3d(-50%, -50%, 0); 
    transform: translate3d(-50%, -50%, 0); 
    z-index: 1; 
} 

Вот рабочая скрипку: https://jsfiddle.net/kae4q601/15/