Overlaying a DIV On Top Of HTML 5 Video

Question

I need to overlay a div ON TOP of a div containing an HTML 5 video  In the example below the overlaying div s id is  video overlays   See example below    x000D   x000D   lt div id  video box  gt  x000D     lt div id  video overlays  gt  lt  div gt  x000D     lt div gt  x000D       lt video id  player  src  http   video webmfiles org big-buck-bunny trailer webm  type  video webm  onclick  this play     gt Your browser does not support this streaming content  lt  video gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Accepted Answer

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

User · Answer

Here s an example that will center the content within the parent div  This also makes sure the overlay starts at the edge of the video  even when centered    lt div class  outer-container  gt       lt div class  inner-container  gt           lt div class  video-overlay  gt Bug Buck Bunny - Trailer lt  div gt           lt video id  player  src  http   video webmfiles org big-buck-bunny trailer webm  controls autoplay loop gt  lt  video gt       lt  div gt   lt  div gt    with css as   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       here s the jsfiddle https   jsfiddle net dyrepk2x 2   Hope that helps

User · Answer

lt div id  video box  gt     lt div id  video overlays  gt  lt  div gt     lt div gt       lt video id  player  src  http   video webmfiles org big-buck-bunny trailer webm  type  video webm  onclick  this play     gt Your browser does not support this streaming content  lt  video gt     lt  div gt   lt  div gt    for this you need to just add css like this    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

User · Answer

Here is a stripped down example  using as little HTML markup as possible  The Basics  The overlay is provided by the  before pseudo element on the  content container   No z-index is required   before is naturally layered over the video element   The  content container is position  relative so that the position  absolute overlay is positioned in relation to it   The overlay is stretched to cover the entire  content div width with left   right   bottom and left set to 0   The width of the video is controlled by the width of its container with width  100    The Demo  x000D   x000D   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    x000D   lt div class  content  gt     lt video id  player  src  https   upload wikimedia org wikipedia commons transcoded 1 18 Big Buck Bunny Trailer 1080p ogv Big Buck Bunny Trailer 1080p ogv 360p vp9 webm  autoplay loop muted gt  lt  video gt   lt  div gt  x000D   x000D   x000D

[html] Overlaying a DIV On Top Of HTML 5 Video

Examples related to html

Examples related to css

Examples related to html5-video