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에 포함되어 있는지 이해하지 못한다. 이 기능이 가능합니까? 잘하면 링크를 강제로 자바 스크립트를 사용하지 않으려 고 노력하고 싶습니다.

Answer 1

해당 버튼을 Z 색인화해야합니다.

.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- 인덱스 값에 임의의 숫자를 할당하는 것은 나쁜 습관입니다. 부트 스트랩과 같은 최신 CSS 프레임 워크를 사용하는 경우 일반적으로 프레임 워크의 유틸리티 클래스 또는 SASS/LESS 변수를 통해 이러한 값이 처리됩니다.

이러한 프레임 워크 중 하나를 사용하지 않는 경우 CSS 파일 상단에 주석을 추가하여 Z- 색인 수준을 지정하고 파일 전체에서 주석을 사용하는 습관을 갖는 것이 좋습니다.