Como expandir videos en Blogger

Como han viso en posts anteriores de prueba y demas he

estado usando un script mencionado en Vagabundia

en el post Como insertar videos sin insertar videos , este es un post similar solo que con varias modificaciones y menos explicativo.



No se trata de algo novedoso sino de "mezclar" algunas de las cosas que ya he comentado para lograr que los videos no se carguen con la página pero puedan ser reproducidos con facilidad.



Todo se basa en un script que nos permite controlar los videos de YouTube, no sólo ocultarlos, algo que sería sencillo utilizando un código y la propiedad display, sino crearlos sólo cuando los reproducimos y eliminarlos cuando los cerramos de tal manera que el buffer (la memoria) se libere y nuestras páginas sean más livianas de cargar y de navegar.



A primera vista, lo más sencillo sería abrir los videos en una página nueva o un popup pero, eso no facilita la navegación ya que, por lo general, son lentas y consumen demasiados recursos. Sin embargo, el CSS nos permite crear un tipo de ventana especial llamada tooltip, que se abre en forma casi instantánea ya que, en realidad, está incluida en nuestra página pero, simplemente, permanece oculta hasta que hacemos click en algún lado.



La idea entonces es, combinar el script que crea el código necesario para reproducir un video específico y colocarlo dentro de un tooltip, con lo cual, podemos reproducirlo con cualquier enlace.



Pero, ya que estamos, ¿por qué no utilizar este método para insertar también otro tipo de archivos de Flash como SWFs?



Bueno, empecemos.



Para esto, sólo necesitamos el script y agregar algunas clases CSS que son las que controlan la parte gráfica y a través de las cuales podemos personalizarla. Las colocamos en la plantilla, por ejemplo, justo antes de la etiqueta </head>:

<style type='text/css'>
.ventanaYTB { /* la ventana donde se ejecutan los videos de YouTube */
height: 395px;
width: 480px;
margin: 0;
text-align: center;
z-index: 1000;
/* propiedades personalizables */
padding: 10px 0 0;
background:#000000;
border: 1px solid #CCCCCC;
}

.cerrarYTB { /* área para el enlace que cierra la  ventana */
vertical-align: middle;
/* propiedades personalizables */
height: 18px;
margin: 5px;
padding: 4px 4px 0 0;
text-align: right;
font: 80% &quot;Trebuchet MS&quot;, Arial, Helvetica, sans-serif;
color: #0000FF;
background:#FFFFFF;
border: 1px solid #CCCCCC;
}

.ventanaSWF { /* la ventana donde se ejecutan los archivos SWF */
width: 100%;
height: 100%;
margin: 0;
padding:0;
text-align: center;
z-index:1000;
}

.cerrarSWF { /* área para el enlace que cierra la  ventana */
margin: 0px;
padding: 0px 0px 2px;
text-align: center;
vertical-align: middle;
}


</style>
<script src='http://lacrax07.googlepages.com/lacraxTooltipsFlash2.js' type='text/javascript'/>

La URL del script de arriba puede ser modificada por la siguiente http://lacrax07.googlepages.com/lacraxTooltipsFlash.js y el cambio se dara en la X para cerrar el video de YouTube por el texto Cerrar.



¿Y cómo lo usamos? Es muy fácil, si queremos insertar un video de YouTube debemos crear dos DIVs, uno oculto y otro visible. El primero será el que use el script y el segundo, es el que nos servirá de enlace y abrirá el primero:

<center>
<div style="display: none;" id="XXXXXXXXXXX">&nbsp;</div>
<div id="v-XXXXXXXXXXX">
<a href="javascript:crearYouTube('XXXXXXXXXXX')">
<div style="background: #000;width: 350px;height: 310px;padding: 0px 0px 20px 0px;">
<img src="http://img.youtube.com/vi/XXXXXXXXXXX/2.jpg" width="350" height="290" />
</div>
</a>
</div>
<div style="font-size: 10px;">Click en la imagen para Iniciar</div>
</center>

¿Y con los archivos SWF? Todo es parecido pero, necesitamos indicar una serie de parámetros más:

<center>
<div style="display:none;" id="nombreID">&nbsp;</div>
<div id="v-nombreID">
<a href="javascript:crearSWF('nombreID','URL_archivoSWF',ancho,alto,'transparent')">
[ABRIR]
</a>
</div>
<div style="font-size: 10px;">Click en la imagen para Iniciar</div>
</center>

donde:



nombreID es el identificador único que usaremos; como en el caso anterior, debe ir en tres lugares diferentes, uno de ellos, anteponiendo v- para diferenciarlo

ancho y alto son el ancho y el alto de la animación, expresados en pixeles

color es el color de fondo que puede ser transparent o un código de color en formato hexadecimal (000000 es negro y FFFFFF es blanco).