HTML 비디오 오버레이 부분적으로 비디오 푸시 다운

Question

스택에서 some answers을 읽은 후 내 YouTube 비디오의 div 오버레이를 만들었습니다. 설명에 따르면 나에게 의미가있는 구성된 div에 div 수를 추가 할 수 있다고 나와 있습니다.

그러나 두 번째 div는 내 동영상을 푸시합니다. 나는 position과 z-index로 조정을 시도했지만 이것이 도움이되지 못했다. divs 중 하나만 비디오를 푸시하는 이유는 무엇입니까? 부모 div가 동영상 위에 마우스를 올려 놓았는지 확인해야하지 않습니까?

은 (첫 번째 DIV가 클릭하여 열 수 있도록 BTW, 두 번째 DIV는 나중에 jQuery로 표시되지 않습니다.) 내가 용기에 비디오 오버레이 포장

:

.outer-container { 
     width:68%; 
     height:575px; 
     margin-left:2%; 
     background-color:#97D3A3; 
     display:inline-block; 
} 
.inner-container { 
    display: inline-block; 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 
.video-overlay { 
    width:100%; 
} 
.video { 
    width: 100%; 
    height: 100%; 
} 

.overlaycontent { 
    width:100%; 
    height:100%; 
    background-color:#fff; 
    color:#000; 
    position: relative; 
    z-index: 98; 
} 

.overlayinfo { 
     position: relative; 
     z-index: 99; 
     height: 0px; 
     border-top: 4px solid #F1860B; 
     width:100%; 
     max-width:816px; 
     text-align:center; 
    } 

    .overlayinfo img { 
     margin:0px auto; 
     width:53px; 
    } 

을 https://jsfiddle.net/boe5xLte/2/

: 여기

<div class="outer-container"> 
     <div class="inner-container"> 
      <div class="video-overlay"> 

       <div class="overlayinfo"> 
        <a href="#" class="infotrigger"><img src="#"></a> 
       </div> 
       <div class="overlaycontent"> 
        Lorem ipsum dolor sit amet 
       </div> 


      </div> 
       <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/6ttrZ11csfI?autoplay=1&controls=0&loop=1&playlist=6ttrZ11csfI&showinfo=0&modestbranding=1" frameborder="0"></iframe> 
     </div> 
    </div> 

은 전체 그림을 볼 수있는 바이올린입니다 : 그리고 이것은 내 HTML입니다

Answer 1

항상 비디오 위에 있지만 자체 (또는 하위) 차원 때문에 어떻게 든 이동하지 않는 래퍼가 필요합니다.

이미 .inner-container을 position: relative으로 설정했습니다. 이제 콘텐츠 흐름에서 벗어나도록 .video-overlay의 위치를 ​​정해야합니다. 당신은 설정하여 그것을 달성 : 나는 그에 따라 바이올린 업데이트

.video-overlay { 
    /*to position it out of content-flow*/ 
    position: absolute; 

    /*to span it to its parents borders*/ 
    top: 0; right: 0; bottom: 0; left: 0; 

    /*to always let it be on top of your subsequent video container*/ 
    z-index: 1; 
} 

: https://jsfiddle.net/boe5xLte/3/

top, right, bottom 및 left 값은 조정과 .video-overlay과이 사이트 사이의 거리를 유사 할 수있다 .inner-container의 동일한 사이트.