web-dev-qa-db-ja.com

HTML 5ビデオの上にDIVをオーバーレイする

HTML 5ビデオを含むdivの上にdivをオーバーレイする必要があります。以下の例では、オーバーレイするdivのIDは「video_overlays」です。以下の例を参照してください。

<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

どうぞ、これが役立つことを願っています

http://jsfiddle.net/kNMnr/

こちらもCSSです

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

これは、可能な限り少ないHTMLマークアップを使用した、簡略化された例です。

基礎

  • オーバーレイは、:beforeコンテナの.content疑似要素によって提供されます。

  • Z-indexは必要ありません。:beforeはビデオ要素の上に自然に階層化されます。

  • .contentコンテナはposition: relativeであるため、position: absoluteオーバーレイはそれに関連して配置されます。

  • .contentおよびleftをleft / right / bottomに設定して、0 divの幅全体をカバーするようにオーバーレイを引き伸ばします。

  • ビデオの幅は、width: 100%でコンテナの幅によって制御されます

デモ

.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

以下は、コンテンツを親divの中央に配置する例です。また、これにより、オーバーレイが中央にある場合でも、ビデオのエッジから確実に開始されます。

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

cssとして

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

これがjsfiddleです https://jsfiddle.net/dyrepk2x/2/

それが役立つことを願っています:)

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>

このためには、次のようにcssを追加するだけです。

#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