video en capa superior

Rorschach · #1 (**permalink**) 25/08/2011, 14:32

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.

danideu · #2 (**permalink**) 25/08/2011, 14:38

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.

Rorschach · #3 (**permalink**) 25/08/2011, 15:03

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

IXtremeLT · #4 (**permalink**) 25/08/2011, 21:17

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.

IXtremeLT · #5 (**permalink**) 25/08/2011, 22:00

Para que entiendas el funcionamiento de estas capas te dejo un ejemplo usando solo css y html:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Ejemplo de capas superpuestas.</title>
        <style type="text/css">
            * {
                z-index: auto;
                margin: 0px;
                padding: 0px;
            }
            #bloqueador {
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 1000;
                position: fixed;
                background-color: #000;
                opacity: 0.8;
                filter: alpha(opacity=80);
            }
            #ventana {
                width: 300px;
                height:300px;
                top:50px;
                left: 358px;
                z-index: 1001;
                position: absolute;
                background-color: #fff;
                border: 2px solid #09f;
                text-align: center;
                overflow: hidden;
            }
        </style>
    </head>
<body>
    <div id="bloqueador"></div>
    <div id="ventana">
        <object width="200" height="200">
            <param name="movie" value="http://www.youtube.com/v/EtLjq3Ocs6w"></param>
            <embed src="http://www.youtube.com/v/EtLjq3Ocs6w" type="application/x-shockwave-flash" width="200" height="200" style="margin-top:50px"></embed>
        </object> 
    </div>
</body>
</html>

Saludos