Jumbotron Div Фоновое видео

Question

Я искал загрузок для кода, который работает, но пока не повезло. Я хочу вставить видео в jumbotron веб-сайта im.

У меня есть этот DIV в HTML:

<div class="center jumbotron"> 

      <h1 class="txtjumbo">We are engage ME!</h1> 
      <p class="txtjumbo">We are results driven.</p> 
      <p><a class="btn center btn-primary btn-lg" id="botjumbo" href="#" role="button">Learn more</a></p> 
     </div> 

И это, как мой сайт выглядит и где я хочу видео. В идеале фоновое видео было бы на 100% размером окна, но могло бы достичь этого, и я пробовал 500 кодов CSS!

Answer 1

Это, как я хотел бы сделать это.

HTML

<div class="jumbotron"> 
    <video id="bg-video" autoplay="true" loop="loop" preload="metadata" muted="muted"> 
     <source src="/PATH/TO/VIDEOFILE" type="video/TYPE" /> 
    </video> 
    <div class="center jumbovidtext"> 
     <h1 class="txtjumbo">We are engage ME!</h1> 
     <p class="txtjumbo">We are results driven.</p> 
     <p><a class="btn center btn-primary btn-lg" id="botjumbo" href="#" role="button">Learn more</a></p> 
    </div> 
</div> 

CSS

#bg-video { 
    top: 0px; 
    left: 0px; 
    position: absolute; 
    width: 100%; 
} 
.jumbovidtext { 
    z-index: 1; 
    position: absolute; 
} 

Here's'a ссылка на штуковину на codepen: http://codepen.io/anthyG/pen/NNEbyg

Answer 2

Большая вещь, чтобы помнить это z-index правило, в частности, поведение z-index: -1 , что ставит предмет за все остальное.

Моя версия, расширенная и модифицированная из кодекса AnthyG, находится ниже (гораздо более полный пример на http://codepen.io/kenbellows/pen/ZWmgRB). Я также установил видео на position: fixed, в основном для личных эстетических предпочтений, но он будет работать так же с position: absolute.

#bg-video { 
 
    top: 0px; 
 
    left: 0px; 
 
    position: fixed; 
 
    z-index: -1; 
 
    width: 100%; 
 
} 
 

 
.jumbovidtext { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 1em; 
 
} 
 

 
.jumbotron { 
 
    background: rgba(128,128,128,0.5); 
 
    margin: 25vh 0; 
 
    overflow-y: hidden; 
 
} 
 

 
main { 
 
    /* Give the main content container a solid background color to hide the fixed position video */ 
 
    background: #fff; 
 
    padding: 2em; 
 
}

<nav id="navbar" class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"> 
 
     <img alt="Brand" class="img-responsive pull-left" id="brand-img" src="https://placehold.it/32x32" /> 
 
     My Company 
 
     </a> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<div class="jumbotron"> 
 
    <video id="bg-video" autoplay="true" loop="loop" preload="metadata" muted="muted"> 
 
    <source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg" type="video/ogg" /> 
 
    </video> 
 
    
 
    <div class="center jumbovidtext text-center"> 
 
    <h1 class="txtjumbo">We are engage ME!</h1> 
 
    <p class="txtjumbo">We are results driven.</p> 
 
    <p><a class="btn center btn-primary btn-lg" id="botjumbo" href="#" role="button">Learn more</a></p> 
 
    </div> 
 
</div> 
 

 
<main> 
 
    <div class="container"> 
 
    <!-- primary content here --> 
 
    </div> 
 
</main>