Foros del Web » Creando para Internet » CSS »

video en capa superior

Estas en el tema de video en capa superior en el foro de CSS en Foros del Web. Hola, ando un poco empolvado con esto de la programación. resulta que tengo un video que quiero que se reproduzca al abrir una página, pero ...
  #1 (permalink)  
Antiguo 25/08/2011, 15:32
 
Fecha de Ingreso: noviembre-2002
Ubicación: tu mente
Mensajes: 17
Antigüedad: 14 años
Puntos: 1
video en capa superior

Hola, ando un poco empolvado con esto de la programación.

resulta que tengo un video que quiero que se reproduzca al abrir una página, pero que lo haga en una capa superior que desaparezca al terminar el video.

Desgraciadamente no recuerdo una pagina que pueda servir como ejemplo, pero a ver si me explico, es algo similar a como facebook muestra las fotos. la pagina se pone algo obscura y encima aparece el slide totalmente nítido, con la opción de cerrarlo y regresar a la pagina original.

Me imagino que esto se hace con css, por eso use este foro.

Gracias.
  #2 (permalink)  
Antiguo 25/08/2011, 15:38
Avatar de danideu  
Fecha de Ingreso: febrero-2005
Ubicación: Barcelona
Mensajes: 210
Antigüedad: 11 años, 9 meses
Puntos: 5
Respuesta: video en capa superior

Utiliza lightbox por ejemplo. Es una buena forma de conseguirlo, ademas te oscurece el fondo, con lo que el video se verá mejor. Hay varias librerías de estas, es cuestión de buscarlas, pero la que te he dicho te valdrá seguro.

Saludos.
  #3 (permalink)  
Antiguo 25/08/2011, 16:03
 
Fecha de Ingreso: noviembre-2002
Ubicación: tu mente
Mensajes: 17
Antigüedad: 14 años
Puntos: 1
Respuesta: video en capa superior

justo lo que estaba buscando, muchas gracias.

Solo como comentario. El lightbox solo soporta imágenes, pero encontré un clon mejorado que tambien acepta flash, flv, pdf y mp3. Se llama bumpbox, lo pruebo y le digo que tal, los demos se ven bien.

Gracias de nuevo danideu
  #4 (permalink)  
Antiguo 25/08/2011, 22:17
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 5 años, 5 meses
Puntos: 32
Respuesta: video en capa superior

Hola que tal,

Te recomiendo que cuando trates con efectos en javascript, utilizes la librería UI-JQuery te ahorra bastante código, evitas bugs entre navegadores y con la mejor optimización que puedas obtener, además de lo atractivo y poderoso que puede ser UI-Jquery.

Mira en tu caso puedes usar el widget "Dialog" con una cortina("modal=true") al abrir el video, por ejemplo el código podría ser:

$( "#MI_VIDEO" ).dialog( { modal: true } );

Esto provocará que el video se formatee para convertirse en una bonita ventana y atrás se pondrá un tipo de cortina que bloqueará la página.

Puedes agregar muchísimas opciones para tu ventana, por ejemplo: efectos, controles de eventos, métodos, temas de diseño con solo cambiar la url del css de UI, etc. etc.

En realidad lo que necesitas es sencillo como para abstenerse a este lujo de JQuery pero creéme que si te fías de JQuery, tu página será más dinámica y fácil de editar, además de que tendrás menos bugs.

Aunque te recomiendo que siempre hagas tus intentos para que no te quedes con el "Uff! soy tan mortal que núnca podré hacer un script como lo que hace JQuery".

Puedes ver como funciona entrando a la página oficial: http://jqueryui.com/demos/dialog/

Saludos.
  #5 (permalink)  
Antiguo 25/08/2011, 23:00
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 5 años, 5 meses
Puntos: 32
Respuesta: video en capa superior

Para que entiendas el funcionamiento de estas capas te dejo un ejemplo usando solo css y html:
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5.         <title>Ejemplo de capas superpuestas.</title>
  6.         <style type="text/css">
  7.             * {
  8.                 z-index: auto;
  9.                 margin: 0px;
  10.                 padding: 0px;
  11.             }
  12.             #bloqueador {
  13.                 width: 100%;
  14.                 height: 100%;
  15.                 top: 0;
  16.                 left: 0;
  17.                 z-index: 1000;
  18.                 position: fixed;
  19.                 background-color: #000;
  20.                 opacity: 0.8;
  21.                 filter: alpha(opacity=80);
  22.             }
  23.             #ventana {
  24.                 width: 300px;
  25.                 height:300px;
  26.                 top:50px;
  27.                 left: 358px;
  28.                 z-index: 1001;
  29.                 position: absolute;
  30.                 background-color: #fff;
  31.                 border: 2px solid #09f;
  32.                 text-align: center;
  33.                 overflow: hidden;
  34.             }
  35.         </style>
  36.     </head>
  37.     <div id="bloqueador"></div>
  38.     <div id="ventana">
  39.         <object width="200" height="200">
  40.             <param name="movie" value="http://www.youtube.com/v/EtLjq3Ocs6w"></param>
  41.             <embed src="http://www.youtube.com/v/EtLjq3Ocs6w" type="application/x-shockwave-flash" width="200" height="200" style="margin-top:50px"></embed>
  42.         </object>
  43.     </div>
  44. </body>
  45. </html>
Saludos

Etiquetas: superior, video, capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:46.