Overlaying a Div on Top of HTML 5 Video

Overlaying a DIV On Top Of HTML 5 Video

There you go , i hope this helps

http://jsfiddle.net/kNMnr/

here is the CSS also

#video_box{
    float:left;
}
#video_overlays {
position:absolute;
float:left;
    width:640px;
    min-height:370px;
    background-color:#000;
    z-index:300000;
}

How to stack an overlay over html5 video

 <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" />
  Your browser does not support this 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;
}

HTML5 video - overlay a div above it

When z-indexing an element you need to make sure to z-index the other elements your are layering as well.

.text{
    position: relative;
    z-index: 9;
}

---

Related Topics