CODEWITHSUNDEEP
csshtml
highpass
highpass

Reputation: 23

How to stack an overlay over html5 video

I have attempted the answers found here but still cannot fathom how to overlay a images and text over html5 video. Whatever I try the elements simply stack above or below one another. The code is as 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 does not support this 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;
}

Upvotes: 2

Views: 10403

Answers (1)

alessandrio
alessandrio

Reputation: 4370

 <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;
}

Upvotes: 4

Related Questions