web-dev-qa-db-fra.com

Superposition d'une DIV sur la vidéo HTML 5

J'ai besoin de superposer une div au dessus d'une div contenant une vidéo HTML 5. Dans l'exemple ci-dessous, l'identifiant de la division superposée est "video_overlays". Voir exemple ci-dessous:

<div id="video_box">
  <div id="video_overlays"></div>
  <div>
    <video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" onclick="this.play();">Your browser does not support this streaming content.</video>
  </div>
</div>
htmlcsshtml5css3html5-video
32
Joshua Scott

Voilà, j'espère que cela aide

http://jsfiddle.net/kNMnr/

voici le CSS aussi

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

Voici un exemple simplifié, utilisant le moins de balises HTML possible.

Les bases

  • La superposition est fournie par le :before pseudo-élément sur le .content récipient.

  • Aucun z-index n'est requis, :before est naturellement superposé à l'élément vidéo.

  • Le .content conteneur est position: relative de sorte que la position: absolute La superposition est positionnée par rapport à celle-ci.

  • La superposition est étirée pour couvrir l’ensemble .content largeur div avec left / right / bottom et left définis sur 0.

  • La largeur de la vidéo est contrôlée par la largeur de son conteneur avec width: 100%

La démo

.content {
  position: relative;
  width: 500px;
  margin: 0 auto;
  padding: 20px;
}
.content video {
  width: 100%;
  display: block;
}
.content:before {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
<div class="content">
  <video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" autoplay loop muted></video>
</div>
25
misterManSam

Voici un exemple qui va centrer le contenu dans la division parent. Cela permet également de s'assurer que la superposition commence au bord de la vidéo, même lorsqu'elle est centrée.

<div class="outer-container">
    <div class="inner-container">
        <div class="video-overlay">Bug Buck Bunny - Trailer</div>
        <video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" controls autoplay loop></video>
    </div>
</div>

avec css comme

.outer-container {
    border: 1px dotted black;
    width: 100%;
    height: 100%;
    text-align: center;
}
.inner-container {
    border: 1px solid black;
    display: inline-block;
    position: relative;
}
.video-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 10px;
    padding: 5px 5px;
    font-size: 20px;
    font-family: Helvetica;
    color: #FFF;
    background-color: rgba(50, 50, 50, 0.3);
}
video {
    width: 100%;
    height: 100%;
}

voici le jsfiddle https://jsfiddle.net/dyrepk2x/2/

J'espère que ça t'as aidé :)

14
maninvan
<div id="video_box">
  <div id="video_overlays"></div>
  <div>
    <video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" onclick="this.play();">Your browser does not support this streaming content.</video>
  </div>
</div>

pour cela, vous devez simplement ajouter des CSS comme ceci:

#video_overlays {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.46);
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
#video_box{position: relative;}
4
Bhumi Patel