Superposición de un DIV encima de un video HTML 5

Posteriormente a consultar con expertos en el tema, programadores de deferentes áreas y profesores dimos con la solución al dilema y la plasmamos en esta publicación.

Solución:

Aquí hay un ejemplo simplificado, usando la menor cantidad de marcado HTML posible.

Los basicos

• La superposición la proporciona el :before pseudo elemento en el .content envase.

• No se requiere índice z, :before se superpone de forma natural sobre el elemento de vídeo.

• Él .content el contenedor es position: relative de manera que la position: absolute superposición se coloca en relación con ella.

• La superposición se estira para cubrir todo el .content ancho div con left / right / bottom y left ajustado a 0.

• El ancho del video está controlado por el ancho de su contenedor con width: 100%

La demostración

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

Aquí hay un ejemplo que centrará el contenido dentro del div principal. Esto también asegura que la superposición comience en el borde del video, incluso cuando esté centrado.

    

        
Bug Buck Bunny - Trailer
        
    

con css como

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

aquí está el jsfiddle https://jsfiddle.net/dyrepk2x/2/

Espero que ayude 🙂

Ahí tienes, espero que esto ayude

http://jsfiddle.net/kNMnr/

aquí está el CSS también

#video_box
    float:left;

#video_overlays 
position:absolute;
float:left;
    width:640px;
    min-height:370px;
    background-color:#000;
    z-index:300000;

Reseñas y valoraciones

Si para ti ha sido de provecho nuestro post, sería de mucha ayuda si lo compartes con el resto juniors así nos ayudas a extender este contenido.

---

---

Utiliza Nuestro Buscador