HTML5ビデオオーバーラップ - クリック可能なボタン付き

Question

私はウェブサイトに表示しているビデオをHTML5ビデオで使用しています。私がやりたいことは重なりがありますが、ボタン/リンクをクリックしてクリックすると詳細情報が表示されます。

など。

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

リンクは実際には動作しません。私は私の人生のためになぜそれがdivの中に含まれているのか理解できません。この機能は可能ですか？うまくいけば、リンクを強制するためにJavaScriptを使用しないようにしてみてください。

Answer 1

あなたはそのボタンをz-indexする必要があります。

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

あなたは絶対にそのボタンを配置している、と理由文書フローの、ビデオコンテナは、概念的には、それはまだ見えだにもかかわらず、それをカバーしています。

編集

@JonasGrumannはコメントで良い点を上げます。 Z-インデックス値に乱数を割り当てるのは悪い習慣です。あなたがBootstrapのような現代のCSSフレームワークを利用しているのであれば、フレームワーク内のユーティリティクラスやSASS/LESS変数を使ってこれらの値を処理するのが一般的です。

これらのフレームワークを使用していない場合は、CSSファイルの上部にあるコメントを追加して、Zインデックスレベルを指定し、ファイル全体でコメントを使用することをお勧めします。