Wie stack ein overlay über html5-video

Habe ich versucht, die Antworten, die hier gefunden aber noch nicht ergründen können, wie Sie overlay-Bilder und text über html5-video. Was auch immer ich versuche, die Elemente einfach stapeln oben oder unten einen anderen. Der code ist wie folgt:

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;
}
  • könnten Sie machen einen jsfiddle ?
  • Ja, hier gehen Sie: jsfiddle.net/bnzfY
  • versuchen Sie eine Hintergrundfarbe. Dann werden Sie sehen, dass Sie in der Tat über das video
  • Was @Johansrk sagte, fügen Sie eine hintergrund-Farbe, den Stil für #video_overlays und du wirst sehen, dass es tatsächlich das video abdecken.
  • Ich hasse es zuzugeben, aber Sie sind ganz richtig. Ratet mal, was fehlt... die Verlinkung der style-sheet in den ersten Platz. Ugh. Dank
InformationsquelleAutor highpass | 2014-03-24
  1. 3
     <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;
}
    • es wäre möglich, das es auf IE7+ ?
    InformationsquelleAutor alessandrio
Schreibe einen Kommentar