Mostrar ventana. Otra forma 2

Respondiendo a la pregunta de Alfredo en la anterior entrada.

Este código lo podemos utilizar en los post o entradas cambiando el nombre de la ID.

Ir a Diseño, Edición de HTML y justo arriba de </head>

Poner el siguiente código:

<script type="text/javascript">
//<![CDATA[
function mostrarvideovku(idvideo){
var video = document.getElementById(idvideo);
video.style.display = (video.style.display == "none") ? "block" : "none";
}
//]]>
</script>
<style type='text/css'>
/* CSS de la ventana no cambiar*/
.ventanavideovku {
position:fixed;
top: 50%;
left: 50%;
margin: -200px 0 0 -250px;
border: 1px solid #ccc;
z-index:99999
}
/* CSS del titulo - personalizar a gusto*/
.titulovideovku {
border: 1px solid #ccc;
display: block;
background: #ccc;
color:red;
padding:2px 5px;
}
</style>

Guardar Plantilla.

Ahora en cada entrada para mostrar un video (al igual que la anterior entrada no es solamente para vídeos) teniendo en cuenta la configuración que tengamos en Opciones de entrada.

Si tenemos marcado Pulsar "Intro" para los saltos de línea, hay que poner el siguiente código todo junto.

Ponerlo abajo de todo lo escrito en la entrada.

<div id='video1' class='ventanavideovku' style="display:none;"><span class='titulovideovku' >ACÁ VA EL TITULO<a href="javascript:mostrarvideovku('video1');"><img border="0" style="right:5px;position:absolute;top:3px" src="URL DE IMAGEN DE BOTÓN DE CERRAR" title="Cerrar" /></a></span><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/boDvXJLau1A?fs=1&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/boDvXJLau1A?fs=1&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></div>

Lo que esta en Azul es el código del vídeo proporcionado por YouTube.

En Rojo es lo que hay que cambiar para cada vídeo. (para cada vídeo tiene que ser distinto el número)

Ejemplo: video1, vedeo2, video3, etc...

Tener en cuenta que se repite 2 veces en el código, y otra más en el link para mostrar o abrir el video.

Ahora para mostrar o abrir el vídeo colocaremos un link de la siguiente forma:

<a href="#" onclick="mostrarvideovku('video1');return false">TEXTO O IMAGEN</a>

Como dije antes, cambiar video1 por el mismo número del código del div contenedor del vídeo.


Ejemplo abrir vídeo

La ventana se puede cerrar desde la imagen del botón o mismo desde el link para abrirlo.

Suerte Alfredo.

ACÁ VA EL TITULO