Colocar video de fondo en Div

[LinkLooker]

Saludos, la cuestion es que quiero colocar un video de fondo en un div al 100% y sobre este colocar dos div semi transparentes con un width de 50% cada uno...El asunto es que al colocar el video dentro del primer div ( al 100%) los otros dos no se muestran..he probado con z-index y nada..colocando una imagen dentro del div al 100% si se ve todo bien, pero al colocar el video, todo se mueve...a continuación el codigo:



HTML:

Código:

 

<div id="video">
<video autoplay="" loop="loop" preload="true" width="100%">
    	<source src="../carpeta/rootl/video/chrome_japan.ogv" type="video/ogg"></video>

    <div id="contenidoder">Este div es transparente  </div>
    <div id="contenidoizq">Este otro div es transparente</div>

</div>

CSS:

Código:

#video {
 width:100%;
height:500px;
position:absolute;
z-index:999;
overflow:hidden;

#contenidoizq { width:50%;
height:500px;
background-color:#32c0c4;
float: right;
position:absolute;
z-index:2;
/*border:#333 solid 1px;*/   }

#contenidoder { width:50%;
height:500px;
float:right;
background-color:#32689b;
position:absolute;
z-index:1;
border:#333 solid 1px;
  }

NOta: Para colocar los div transparentes uso un Js llamado Transify...


Gracias por cualquier ayuda prestada

[GusleonP]

Hola lo que quieres es dejar de fondo de tu pagina un video y encima el contenido que quieras? Esto lo hice para un cliente, si es asi avisame y te digo como es: https://www.ideasalvajes.com/F5/motion-graphics.html

También pues ver el código y la cojes de alli. Espero sea de ayuda.

[LinkLooker]

Saludos..Gracias por responder....En realidad no quiero poner el video en toda la página sino en un div y encima dos dvs semitransparentes....Reviso tu ejemplo y te comento.....Gracias de antemano

[catucux]

El error es que le estas dando propiedades a la capa de #video pero dentro de esta hay dos capas mas, lo que debes hacer es crear una capa individual para el video dentro de #video.

Código HTML:

<div id="video">
<div class="mivideo">
      <video autoplay="" loop="loop" preload="true" width="100%">
      <source src="../carpeta/rootl/video/chrome_japan.ogv" type="video/ogg"></video>
</div>
<div id="contenidoder">Este div es transparente  </div>
<div id="contenidoizq">Este otro div es transparente</div>
 
</div>
 

Si lo que quieres es poner los otros dos divs encima del que tiene video, debes configurar tu z-index, recuerda que mientras mayor sea al numero que le coloques estara al frente.

Por ejemplo:

Código HTML:

#video {
overflow:hidden;
}
.mivideo{
position: absolute;
z-index: 1;
}
#contenidoizq { width:50%;
position:absolute;
z-index:2;
/*border:#333 solid 1px;*/   }
 
#contenidoder { width:50%;
position:absolute;
z-index:3;
}
 

Si lo colocas asi la capa de video estara hasta abajo, la de #contenidoizq le seguira por encima y de ultimo #contenidoder estara encima de todas.

Saludos.