ビデオの背景オーバーレイセクション

Question

私は100vhの最小高さと5つのセクションを持つこのウェブサイトを持っている。最初のものには、このセクションの背景として使用しているビデオ（html5ビデオタグ付き）があります。 問題は、このビデオが2番目のセクションの上に残り、そのコンテンツの一部が隠れていることです。

2番目のセクションでZインデックスを上げようとしましたが、何も変わりません。 私は何ができますか？

video { 
    margin: 0; 
    padding: 0; 
} 

.video { 

    position: absolute; 
    top: 50%; left: 50%; 
    z-index: 1; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    transform: translate(-50%, -50%); 
} 




<section id="first"> 
<!-- NAVBAR HERE --> 

<video id="my-video" class="video" autoplay="autoplay" loop="loop" muted="" width="300" height="150"> 
     <source src="img/video.mp4" type="video/mp4" /> 
    </video><!-- /video --> 


    <div class="container"> 


    <div class="row logo" style="z-index:100;"> 
     <div class="col-md-12"><img src="img/logo-cinza.png" class="img-responsive logo-grad" /></div> 
    </div> 



    <div class="row botao" style="z-index:100;"> 
     <div class="col-md-12" style="text-align: center;"><a href="contact.html"><button class="btn btn-lg" id="button"><p>Available for hire</p></button></a></div> 
    </div> 




    <div class="row chevron-down" style="z-index:100;"> 
     <div class="col-md-12"> 
     <p style="text-align:center; font-size:0.8em; color:#c3c0c0 ">Click to see more awesomness</p> 
     <a href="#second" class="smoothScroll"><img class="img-responsive seta" width="40px" src="img/seta-cinza.png" alt="Discover More Awesomness" /></a> 
     </div> 
</div> 



    </div> 

    </section> 
<section id="second">.. 

Answer 1

オーバラップは、ビデオのコンテナオーバーフローによるものと思われます。あなたの質問には、具体的には十分なCSS /マークアップがありませんが、私は以下の簡単な例をまとめました。

この例では、div内にコンテンツを配置し、z-インデックスを使用してそれを相対位置に設定して、ビデオをオーバーレイするようにしています。

HTML：

<div class="section-1 video-section section"> 
    <video id="my-video" class="video" autoplay="autoplay" loop="loop" muted="" width="300" height="150"> 
     <source src="img/video.mp4" type="video/mp4" /> 
    </video> 

    <div class="content">Here goes my content</div> 
</div> 

<div class="section-2 section"> 
    Put some content here for section 2. 
</div> 

CSS：

.section { 
    min-height: 100vh; 
    overflow: hidden; 
    position: relative; 
} 

.video { 
    height: auto; 
    left: 50%; 
    min-height: 100%; 
    min-width: 100%; 
    position: absolute; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    width: auto; 
} 

.content { 
    position: relative; 
    z-index: 1; 
}