Agregando videitos paso a paso

Como ya son varias las veces que me prguntan la forma en que están colocado los videos en la sidebar en Infinitos Mundos, voy a ver si puedo explicarlo; no es que sea difícil de hacer sino que hay ciertos datos dependen de donde se va a colocar, especialmente del ancho y el margen.

En realidad, como la idea es dividir un bloque en partes iguales, puede aplicarse a cualquier otra cosa pero, tratándose de videos, lo primero que necesitamos es algún script que los abra en una ventana modal; cualquiera de ellas es lo mismo y como uso LightWindow, voy a basarme en esa.

Pero empecemos con las imágenes para no complicar las cosas. Necesitamos las imágenes de los videos, miniaturas que podemos hacer nosotros mismos o si se trata de videos de YouTube, usar las que ellos mismos nos proveen. Por ejemplo, queremos poner estos cuatro videos:

http://www.youtube.com/watch?v=Ur4KW83CviQ
http://www.youtube.com/watch?v=jkTNe85y0UI
http://www.youtube.com/watch?v=0k2pYlcxogU
http://www.youtube.com/watch?v=mw1_BQpHSpo

Lo único que varía entre ellos es el ID, un conjunto de once caracteres que identifican cada video y que es un dato único e irrepetible.

Cuando los agregamos, antes de ser ejecutados, vemos que nos muestra una imagen estática. Esa imagen es accesible porque siempre está en el mismo lugar. Y no solo hay una, hay tres por cada video:

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

Como ya tenemos todos los datos, vamos a agregar un elemento HTM en la sidebar y allí, colocaremos el código:

<div id="minivideos">
  <a class="lightwindow" href="http://www.youtube.com/v/Ur4KW83CviQ" params="lightwindow_width=425,lightwindow_height=350,lightwindow_loading_animation=true" title="" rel="">
    <img src="http://img.youtube.com/vi/Ur4KW83CviQ/3.jpg"/>
  </a>
  <a class="lightwindow" href="http://www.youtube.com/v/jkTNe85y0UI" params="lightwindow_width=425,lightwindow_height=350,lightwindow_loading_animation=true" title="" rel="">
    <img src="http://img.youtube.com/vi/jkTNe85y0UI/3.jpg"/>
  </a>
  <a class="lightwindow" href="http://www.youtube.com/v/0k2pYlcxogU" params="lightwindow_width=425,lightwindow_height=350,lightwindow_loading_animation=true" title="" rel="">
    <img src="http://img.youtube.com/vi/0k2pYlcxogU/3.jpg"/>
  </a>
  <a class="lightwindow" href="http://www.youtube.com/v/mw1_BQpHSpo" params="lightwindow_width=425,lightwindow_height=350,lightwindow_loading_animation=true" title="" rel="">
    <img src="http://img.youtube.com/vi/mw1_BQpHSpo/3.jpg"/>
  </a>
</div>

Hemos creado un rectángulo al que llamamos minivideos y allí colocamos los enlaces de los cuatro videos, usando las miniaturas del mismo YouTube. Guardamos y veremos ... vaya uno a sabe lo que veremos porque allí comienzan las diferencias entre una plantilla y otra. Pero, para eso le dimos un nombre así que agregaremos definiciones CSS antes de </b:skin>:

#minivideos {text-align: center;}
#minivideos a img {
  height: 95px;
  margin: 3px 3px 0 3px;
  width: 130px;
}

Con esto, centraremos las imágenes y las separaremos un poco entre si. además, como esas miniaturas no son todas del mismo tamaño, las dimesionamos:

Ahora, vamos a decorarlo un poco, agregándole un borde a las imágenes y dándoles un padding (relleno) de tal manera de separar ese borde de la imagen en si misma:

#minivideos a img {
  border: 2px solid #567;
  height: 95px;
  margin: 3px 3px 0 3px;
  padding:3px;
  width: 130px;
}

Claro que, estamos partiendo de una idea que tal vez es errónea, suponemos que tenemos una sidebar lo suficientemente ancha para que entren dos miniaturas pero, tal vez, eso no es cierto, ¿qué pasaría si es demasiado angosta?

Lo que pasa siempre que no hay lugar suficiente; lo que no entra se va para abajo así que, lo que debemos hacer es reducir el ancho de las imágenes.

En este ejemplo, la supuesta sidebar tiene 250 pixeles de ancho y como las imágenes tienen 130 pixeles cada una, no entran pero no basta reducirlas a 125 porque hay un detalle que debe tenerse muy en cuenta, el ancho necesario no es el ancho indicado por width sino ese valor más los bordes (border), rellenos (padding) y márgenes (margin). Quiere decir que podemos calcular el ancho máximo de la imagen con un poco de aritmética.

No podemos usar más de 125 pixeles; y tenemos 3 pixeles de margen, 2 pixeles de borde y 3 pixeles de relleno, o sea 8 pixeles a cada lado. Debemos entonces restar:
125 - 8 - 8 = 109
ese, será el ancho máximo de la imagen que podemos usar:

#minivideos a img {
  border: 2px solid #567;
  height: 80px;
  margin: 3px 3px 0 3px;
  padding: 3px;
  width: 109px;
}

Y si quisiéramos poner 3 imágenes, haríamos lo mismo:
250 / 3 = 83
83 - 8 - 8 = 67
así que:

#minivideos a img {
  border: 2px solid #567;
  height: 49px;
  margin: 3px 3px 0 3px;
  padding: 3px;
  width: 67px;
}

Seguimos con dos por fila achicando aún más la imagen para que se separe de los bordes y agregándole más detalles a gusto:

 #minivideos a img {
  -moz-border-radius: 5px;
  background-color: #345;
  border: 2px solid #567;
  height: 75px;
  margin:3px 3px 0 3px;
 padding: 3px;
  width: 100px;
}

Y un último ejemplo, ya funcionando y con un efecto hover:

#minivideos a img {
  -moz-border-radius: 5px;
  background-color: #345;
  border: 2px solid #567;
  height: 75px;
  margin: 3px 3px 0 3px;
  opacity: 0.8;
  filter:alpha(opacity=80);
  padding: 3px;
  width: 100px;
}
#minivideos a img:hover {
  border: 1px solid #CDE;
  height: 83px;
  opacity:1;
  filter:alpha(opacity=100);
  padding:0;
  width: 108px;
  -moz-border-radius:0px;
}