Cómo insertar videos sin insertar videos

Voy a ver si puedo cumplir una de mis deudas, explicando un poco el método que estoy utilizando para mostrar ciertos videos de YouTube, tema sobre lo cual me han preguntado infinidad de veces y siempre he respondido: estoy trabajando en ello. En realidad, no lo hacía, había ciertas cosas que no terminaban de convencerme y he dedicado el fin de semana para poner un poco de orden y simplificarlo hasta donde he podido.

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. Por ejemplo:

EJECUTAR VIDEO (hacer click en para cerrar)

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;
margin: 0;
text-align: center;
z-index: 1000;
/* propiedades personalizables */
padding: 10px 0 0;
background-color: #000000;
border: 1px solid #343F4A;
}

.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;
color: #FF9933;
background-color: #101921;
border: 1px solid #343F4A;
}

.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: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}
</style>

<script src="URL_vagaTooltipsFlash.js" type="text/javascript"></script>

Como siempre, el archivo vagaTooltipsFlash.js lo alojamos en un servidor externo y colocamos la dirección URL correspondiente.

Tal como está, el enlace para cerrar la ventana es una imagen alojada en ImageShack pero, podemos poner cualquier otra. Para esto, sólo debemos editarlo:

var elVinculo = "<img src=\"archivo\">";

Eventualmente, también podemos modificarlo cambiando la imagen por un texto:

var elVinculo = "CERRAR VENTANA";

¿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:

<div style="display: none;" id="xxxxxxxxxxx">&nbsp;</div>
<div id="v-xxxxxxxxxxx">
<a href="javascript:crearYouTube('xxxxxxxxxxx')">ENLACE</a>
</div>

donde xxxxxxxxxxx será el código identificador del video que nos provee YouTube, por ejemplo:

http://www.youtube.com/watch?v=oWpY9CJBbFQ http://www.youtube.com/v/oWpY9CJBbFQ

Ese conjunto de letras y/o números es el video_id y YouTube lo genera individualmente para cada uno de ellos lo que nos ayuda a identificar los DIVs con un nombre único e irrepetible. Lo utilizaremos en tres lugares: como ID del DIV oculto, dentro del script para que sepa qué video reproducir y como ID del enlace pero, en este caso, para diferenciarlo del primero, le agregaremos v- adelante.

El enlace, no tiene por que ser un texto, también puede ser una imagen cualquiera. Entonces, si quisiéramos insertar el video anterior, escribiríamos el siguiente código, todo en una sola línea:

<div style="display: none;" id="oWpY9CJBbFQ">&nbsp;</div>
<div id="v-oWpY9CJBbFQ">
<a href="javascript:crearYouTube('oWpY9CJBbFQ')">
<img src="URL_imagen"/>
</a>
</div>

Que dará el siguiente resultado:

Y si no queremos trabajar, también podemos utilizar las imágenes que provee YouTube como thumbnails. Hay disponibles tres para cada video:

http://img.youtube.com/vi/xxxxxxxxxxx/1.jpg http://img.youtube.com/vi/xxxxxxxxxxx/2.jpg http://img.youtube.com/vi/xxxxxxxxxxx/3.jpg

Nuevamente, reemplazamos xxxxxxxxxxx por el ID del video. Si el video es este:

http://www.youtube.com/watch?v=9I9mQ5i6ZpY

la imagen por defecto que usa YouTube es la número dos:

http://img.youtube.com/vi/9I9mQ5i6ZpY/2.jpg

Y este será el resultado:

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

<div style="display:none;" id="nombreID">&nbsp;</div>
<div id="v-nombreID">
<a href="javascript:crearSWF('nombreID','URL_archivoSWF',ancho,alto,'color')">
ENLACE
</a>
</div>

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)