¿html como oculto videos embed?

hola alguien me podria decir como ocultar el reproductor de video.

estoy haciendo mi blog y esque tengo en 1 sola pagina muchos videos y cada que entro tarda un poco en cargar todos los reproductores. yo tengo en mente poner una miniatura del video y que con un click apareciera el reproductor pero en la misma pagina sin que me mande a otra aqui les dejo un ejemplo:

o como facebook cuando aparece la miniatura y se atenua la pantalla y sale el video

cualquier cosa para ocultar el reproductor me serviria pero sin cambiar de pagina

ya sea html css o javascript me serviria mucho gracias.

Comments

  • Lo que requieres es que a todos los reproductores les pongas una class que los haga invisibles (hidden), o bien, usar jquery para habilitar un /lazy load/ --- los reprodctores se activarian hasta que se necesiten ---

    En concreto el ejemplo que pusiste, lo que hace es crear 3 achivos distintos.

    Primera capa te presenta un resumen en texto del capítulo 19 de la temporada 4 y muestra un IFRAME (una ventana donde se puede cargar otra pagina - aquí es donde ves el /elige un servidor/ -- esta ventana carga el archivo Elegir19.html de la Temporada 4), este es el 2do archivo

    Y de ahí puedes ver tres opciones, vimeo, hulkshare o drive, y cada grafico es una liga a un archivo .html distinto que ya trae el embeded del video (19dr.html / 19f.html / 19v.html).

    El secreto es que todo se carga dentro del IFRAME de la pagina inicial.

    Saludos

  • <!-- gracias me orientaste mucho. ya encontre un metodo con javascript. -->

    <!-- HTML -->

    <div id="demo1" style="display:none;">ELEMENTO OCULTO</div>

    <a href="javascript:void(0);" onclick="SINO('demo1')"><img src="URL DE LA IMAGEN" width="42" height="42"></a>

    <!-- En elemento oculto puse el embed del video y en url de la imagen puse una miniatura de este -->

    /*JAVASCRIPT*/

    function SINO(cual) {

    var elElemento=document.getElementById(cual);

    if(elElemento.style.display == 'block') {

    elElemento.style.display = 'none';

    } else {

    elElemento.style.display = 'block';

    }

    }

    <!-- La miniatura actúa como botón ocultar-mostrar -->

    <!-- aunque aun no quedo satisfecho seguiré buscando nuevas maneras de mejorar esto, muchas gracias -->

Sign In or Register to comment.