HTML-Video-Overlay, das teilweise das Video herunterdrückt

Question

Nachdem ich some answers auf dem Stack gelesen habe, habe ich ein Div-Overlay für mein Youtube-Video erstellt. Die Beschreibung sagt, es würde mir erlauben, so viele Divs im konstruierten div hinzuzufügen, was für mich einen Sinn ergab.

Wie auch immer, das zweite div, das ich dort reinlege, drückt mein Video runter. Ich habe versucht, mit der Position und Z-Index zu optimieren, aber das hat nicht geholfen. Warum schiebt nur einer der divs das Video runter? Sollte der Elternteil nicht dafür sorgen, dass beide über das Video schweben?

(btw, wird die zweite div mit jquery später ausgeblendet werden, so dass die ersten div es, indem Sie auf es öffnen.)

ich das Video-Overlay in Containern eingewickelt:

.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; 
    } 

und das ist mein HTML:

<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> 

Hier eine Geige ist das komplette Bild zu sehen: https://jsfiddle.net/boe5xLte/2/

Answer 1

Sie möchten einen Wrapper, der immer über dem Video ist, aber es nicht irgendwie wegen seiner eigenen (oder seiner Kinder) Dimensionen "verschiebt".

Sie haben .inner-container bereits auf position: relative eingestellt. Jetzt musst du deine .video-overlay so positionieren, dass sie sich aus dem Content-Flow herausbewegt. Sie erreichen es, indem Sie:

.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; 
} 

ich Ihre Geige entsprechend aktualisiert: https://jsfiddle.net/boe5xLte/3/

Die top, right, bottom und left Werte eingestellt werden kann, und der Abstand zwischen dieser Seite des .video-overlay ähneln und die gleiche Seite der .inner-container.