Aunque poner
un video de youtube en el blog es relativamente sencillo (solo es cuestión de
copiar y pegar el código donde queramos y listo) la cosa cambia cuando queremos
mostrar en el blog más de un video, y hacer que estos se muestren tipo galería
para ir mostrándolos de uno en uno es algo que a cualquiera le provoca un dolor
de cabeza, a menos que se tenga un poco más de conocimientos básicos de HTML.
Eso era lo que yo me temía pero no…
Hace un buen
tiempo que me preguntaba cómo hacer para poner una galería de videos en el blog.
Y aunque existen bastantes plantillas que ya vienen con esta galería incluida
por defecto, personalizarla o mover el script resultaba más que agotador. Y en realidad incluir esta galería de videos
en el blog no resultó tan complicada que digamos (ya saben, aquí fue cierto
aquello de que “no es tan fiero el león como lo pintan”) y resulta que hasta mi
hija de 14 años lo pudo hacer (y eso me trajo sentimientos encontrados: no
sabía si alegrarme o entristecerme) En fin, que pueden ver cómo funciona en este
blog de pruebas.
Para ponerlo
en el blog, primero entren en Plantilla, Edición Html y antes de </head>
pegan el siguiente script:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
Listo.
Guardamos la plantilla siempre dando vista previa por si algo hicimos mal y ahora
entramos en Diseño, Añadir Gadget, Html y pegas el siguiente código:
<center><div
id="contenedorYT">Cargando ...</div>
<script type="text/javascript">
swfobject.embedSWF(
'http://www.youtube.com/v/qahBeZB1g54&autoplay=1&enablejsapi=1&rel=0&fs=1',
'contenedorYT',
'640','390', '8',null,null,
{allowScriptAccess: 'always',allowFullScreen: 'true'},
{id: 'reproductorYT'});
function playVideo(id) {
var o = document.getElementById(
'reproductorYT' );
if( o ) {o.loadVideoById( id );}
}
</script></center>
<br/>
<div class="videominiaturas">
<a href="javascript:playVideo('J3OtzDWBwOo');"><img
src="http://img.youtube.com/vi/J3OtzDWBwOo/1.jpg"
/></a>
<a href="javascript:playVideo('FOJq2dYb4xI');"><img
src="http://img.youtube.com/vi/FOJq2dYb4xI/1.jpg"
/></a>
<a href="javascript:playVideo('fyWjmlMK8Qg');"><img
src="http://img.youtube.com/vi/fyWjmlMK8Qg/1.jpg"
/></a>
<a href="javascript:playVideo('Y1cTclxGE64');"><img
src="http://img.youtube.com/vi/Y1cTclxGE64/1.jpg"
/></a>
<a href="javascript:playVideo('NY9BtBiUUG8');"><img
src="http://img.youtube.com/vi/NY9BtBiUUG8/1.jpg"
/></a>
<a href="javascript:playVideo('QUlYbhfpoKU');"><img
src="http://img.youtube.com/vi/QUlYbhfpoKU/1.jpg"
/></a>
<a href="javascript:playVideo('rU72Kc5yCHI');"><img
src="http://img.youtube.com/vi/rU72Kc5yCHI/1.jpg"
/></a>
</div>
Reemplazas
la ID de los videos en los dos lados que pide y que están resaltados con rojo y listo. Puedes aumentar o disminuir los videos
miniaturas con solo eliminar este código:
<a href="javascript:playVideo('rU72Kc5yCHI');"><img
src="http://img.youtube.com/vi/rU72Kc5yCHI/1.jpg"
/></a>
Si quieres
que el video principal empice a “rodar” automáticamente al igual que lo hacen
los videos en Youtube, pega el código tal cual, pero si no lo quieres así solo
elimina lo que está resaltado en
azul y listo.
Se puede
modificar el ancho y alto del video principal (640 x 390) para que
se ajuste al ancho y alto de cada blog, eso ya dependerá de cómo lo quiera cada
quien y dónde lo ponga, yo he puesto 7 miniaturas pues he practicado en un
gadget debajo de las entradas con todo el ancho del blog (de ahí que el video
principal es del mismo tamaño que el de Youtube) pero si desean ponerlo en una
sidebar las medidas del video lo tienen que acomodar de acuerdo al ancho de esa
sidebar, al igual que las miniaturas. Por lo demás, la galería funciona muy
bien.
