divを完全バックグラウンドビデオに貼り付けます。

Question

完全なバックグラウンドビデオに問題があります。他のコンテンツをビデオの下に置くことはできないからです。別のセクションなどここで

のように私のコードです：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <h1 class="title">Quer achar o emprego dos seus sonhos?</h1> 
     <p class="sub-title">Com a Joobber é fácil!</p> 
      <video autoplay loop muted poster="screenshot.jpg" id="background"> 
       <source src="video/work.mp4" type="video/mp4"> 
      </video> 
    </div> 
    </div> 
</div> 

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-12 new-section"> 
     <h1>NEW SECTION</h1> 
    </div> 
    </div> 
</div> 


<%- include partials/footer.ejs %> 

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

#background{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background: url(polina.jpg) no-repeat; 
    background-size: cover; 
} 


.title{ 
    text-align: center; 
} 
.sub-title{ 
    text-align: center; 
} 

.new-section{ 
    width: 100%; 
    height: 20em; 
    background-color: black; 
} 

問題は、私が作成したコンテンツは、真ん中にあることですビデオコンテナの私はそれを下に置いておきたい。

何が起こっているかについて、印刷画面：Problem

Answer 1

試し「パディングトップ：200pxの：」あなたのタイトルで、何が起こるか参照してください。 （数値は調整する必要があります）。いくつかのオプションがありますが、うまくいくはずです。

（その他のオプションでは、あなたのビデオを「フロート：センター」とすることができますし、あなたのタイトルをクリアするか、または両方をクリアすることができると思います）。

幸運。

Answer 2

あなたのvideo要素をラップして配置されたラッパーを相対することを検討すべきである：

<div class="video-wrapper"> 
    <video autoplay loop muted poster="screenshot.jpg" id="background"> 
     <source src="video/work.mp4" type="video/mp4"> 
    </video> 
</div> 

.video-wrapper { 
    postition: relative; 
    height: 100vh; 
    width: 100vw; 
} 
#background { 
    position: absolute; 
} 

コンテンツの残りの部分は正常に流れるべき。ブートストラップコードで上記のコードをラップする必要はありません。