html - How to stack an overlay over html5 video -


i have attempted answers found here still cannot fathom how overlay images , text on html5 video. whatever try elements stack above or below 1 another. code follows:

html:

<html> <body>   <div id="wrap_video">     <div id="video_box">       <div id="video_overlays">          <img src="img/overlay.png"</img>          <a> text </a>       </div>              <div>      <video id="player" src="mov/movie.mp4" type="video/mp4" autoplay="autoplay" loop>">your browser not support streaming content.</video>   </div>    </div> </div>  </body> </html>

css:

html, body { margin: 0px; } #video_box {   position: absolute;   top: 0;   left: 0;   width: 960px;   height: 720px; } #video_overlays {   position: absolute;   top: 0;   left: 0;   width: 960px;   height: 720px;   z-index: 100; } video#player {   position: absolute;   top: 0;   left: 0;   width: 960px;   height: 720px;   z-index: 99; } #wrap_video {   position: absolute;   top: 0;   left: 0;   width: 960px;   height: 720px; } 

 <div id="wrap_video">              <video id="player" width="960px" height="720px" loop="loop">     <source src="mov/movie.mp4" type="video/mp4"/>     <source src="movie.ogg" type="video/ogg" />   browser not support streaming content. </video>      <div id="video_overlays">           <img src="http://images.apple.com/v/ios/carplay/a/images/carplay_icon.png"/>          <a href="#"> text </a>       </div> </div>

css

html, body { margin: 0px; } #wrap_video {   position: absolute;   top: 0;   left: 0; } #video_overlays {   position: absolute;   top: 0;   left: 0;   width: 960px;   height: 720px;   z-index: 100;   background-color: rgba(255,255,255,.4); } #player{     background: purple; }

Comments

Post a Comment