비디오 배경 오버레이 섹션

Question

그래서이 웹 사이트에는 최소 높이가 100vh 인 5 개의 섹션이 있습니다. 첫 번째에는이 섹션의 배경으로 사용중인 동영상 (html5 동영상 태그 포함)이 있습니다. 문제는이 비디오가 두 번째 섹션 상단에 머물러있어 내용의 일부가 숨겨져 있다는 것입니다.

두 번째 섹션에서 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; 
}