반응 전단지로 html5 비디오 사용

Question

html5를 사용하여 react-leaflet 맵에 오버레이 (이 경우 비디오)를 추가하려고합니다.

<div> 
    <Map viewport={this.state.viewport} onViewportChanged={this.onViewportChanged} zoomControl={false} ref='map'> 
     <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' /> 
    </Map> 
    <div> 
     <video id="samp" width="540" height="300" controls> 
      <source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" type="video/mp4"> 
      </source> 
     </video> 
    </div> 
</div> 

그러나 전단지는 비디오를 계속 무시합니다. 나에게 가장 좋은 방법은 전단지에 비디오를 보관하는 것입니다 (전단지에 비디오 오버레이 구성 요소가 있다는 것을 알고 있지만 사용하지 않을 것을 선호합니다)

Answer 1

나는이 작업을 수행하는 동안 비디오 일부지도 구성 요소 (자체지도가 아닌) 뒤에 숨겨져있어서 vid의 렌더링이 재미있었습니다. Z- 인덱스를 1000으로 설정하고 절대 위치로 설정하면 문제가 해결됩니다.

.video-container { 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 1000; 
}