Incrustar múltiples videos de YouTube

Claro que podemos incrustar múltiples videos de YouTube sin nada especial, copiamos los códigos y listo pero, eso significará que nuestra página se hará muy lenta. También es cierto que podemos recurrir a algún truco que resuelva esto o usar alguna ventana modal.

Otra posibilidad y una buena idea es la que muestran en Nine-One-One... Need Code, Help! que utiliza la librería SWFobject y el API del mismo YouTube.

Si ya tenemos esa librería en nuestro sitio, no hace falta agregarla. Si no la tenemos, podemos hacerlo poniendo esto antes de </head> o directamente en una entrada:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

Ahora, donde querramos que se vea nuestra lista de videos, escribiremos lo siguiente:

<div id="contenedorYT">Cargando ...</div>

<script type="text/javascript">
swfobject.embedSWF(
'http://www.youtube.com/v/ID_VIDEO_1&enablejsapi=1&rel=0&fs=1',
'contenedorYT',
'425','344', '8',null,null,
{allowScriptAccess: 'always',allowFullScreen: 'true'},
{id: 'reproductorYT'});

function cargarVideo(id) {
var o = document.getElementById( 'reproductorYT' );
if( o ) {o.loadVideoById( id );}
}
</script>

Todo eso en una sola línea si se trata de una entrada de Blogger.

ID_VIDEO_1 es el ID del primer video, el que aparecerá por defecto
425 y 344 son el ancho y alto del video
contenedorYT es el ID del DIV donde se mostrará el video
reproductorYT es el ID del reproductor en si mismo

Debajo, pondremos nuestra lista de videos a reproducir, en este caso, usando las mismas miniaturas que nos provee YouTube:

<div class="videominiaturas">
<a href="javascript:cargarVideo('ID_VIDEO_1');"><img src="http://img.youtube.com/vi/ID_VIDEO_1/1.jpg" /></a>
<a href="javascript:cargarVideo('ID_VIDEO_2');"><img src="http://img.youtube.com/vi/ID_VIDEO_2/1.jpg" /></a>
.......
<a href="javascript:cargarVideo('ID_VIDEO_N');"><img src="http://img.youtube.com/vi/ID_VIDEO_N/1.jpg" /></a>
</div>

Vale recordar que el ID es una serie de once caracteres alfanuméricos que podemos tomar desde cualquier página del servicio. Por ejemplo, si el video fuera este:

http://www.youtube.com/watch?v=uKkbn-pdCMA

nuestro enlace sería así:

<a href="javascript:cargarVideo('uKkbn-pdCMA');"><img src="http://img.youtube.com/vi/uKkbn-pdCMA/1.jpg" /></a>

El resultado, será un video incrustado y debajo, una serie de miniaturas donde podremos hacer click para ir ejecutándolos uno a uno y que se irán cargando de manera dinámica.