HTML5-Videoüberlappung - Mit Schaltflächen anklickbar

Question

Ich habe ein Video, das ich auf einer Website anzeigen und HTML5 Video verwenden. Was ich tun möchte, ist die Überlappung, aber ich würde gerne einen Knopf/Link haben, der, wenn du darauf klickst, dich dazu bringt, mehr Informationen zu finden.

z.

.outer-container { 
 
    border: 1px dotted black; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 
.inner-container { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.video-overlay { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    margin: 10px; 
 
    padding: 5px 5px; 
 
    font-size: 20px; 
 
    font-family: Helvetica; 
 
    color: #FFF; 
 
    background-color: rgba(50, 50, 50, 0.3); 
 
} 
 
video { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="outer-container"> 
 
    <div class="inner-container"> 
 
     <div class="video-overlay">Bug Buck Bunny - Trailer 
 
     <br /> 
 
     <br /> 
 
      
 
      <a href="http://www.google.com">Find out more</a> 
 
     </div> 
 
     <video id="player" controls 
 
     src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" autoplay loop></video> 
 
    </div> 
 
</div>

Der Link funktioniert nicht wirklich. Ich kann nicht für das Leben von mir verstehen, warum nicht, wie es in einem div enthalten ist. Ist diese Funktionalität möglich? Willst du hoffentlich versuchen, Javascript zu vermeiden, um einen Link zu erzwingen.

Answer 1

Sie müssen diese Schaltfläche z-indexieren.

.video-overlay { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    margin: 10px; 
    padding: 5px 5px; 
    font-size: 20px; 
    font-family: Helvetica; 
    color: #FFF; 
    background-color: rgba(50, 50, 50, 0.3); 
    z-index: 5; 
} 

https://jsfiddle.net/5n1vvzee/

Sie unbedingt auf diese Schaltfläche positionieren, und wegen der Dokumentenfluss wird das Video Behälter abdeckt es konzeptionell auf, obwohl es immer noch sichtbar ist.

bearbeiten

@JonasGrumann wirft einen guten Punkt in den Kommentaren. Das Zuweisen von Zufallszahlen für Z-Index-Werte ist eine schlechte Übung. Wenn Sie ein modernes CSS-Framework wie Bootstrap verwenden, werden diese Werte im Allgemeinen über Dienstprogrammklassen oder SASS/LESS-Variablen im Framework für Sie verarbeitet.

Wenn Sie eines dieser Frameworks nicht verwenden, sollten Sie sich die Angewohnheit geben, Kommentare am oberen Rand Ihrer CSS-Datei hinzuzufügen, um die Z-Index-Ebenen festzulegen und sie entsprechend in Ihren Dateien zu verwenden.