¿Has intentado alguna vez insertar un reproductor de música/vídeo/slideshow en la barra lateral de tu blog y luego lo has descartado porque no quedaba bien? Seguro que sí. Pero eso te volverá a ocurrir si lees este post, ya que con él vas a aprender a modificar el código HTML de
esos malditos reproductores que no encajan en ninguna parte.
···Como ya sabes, la inmensa mayoría de las
plataformas fotográficas, musicales y de vídeo permiten ya insertar reproductores y slideshows en nuestros blogs gracias al código HTML (Si no sabías nada del tema, te aconsejo la previa lectura del post "
Cómo insertar un reproductor"). Sin embargo, dichas plataformas muchas veces no ofrecen la posibilidad de insertar reproductores lo suficientemente reducidos como para incrustrarlos en la barra lateral, por lo que, al insertarlos, acabamos deformando el reproductor o incluso el propio blog.
···Como he avanzado, la solución está en
modificar algunas cifras del código HTML de forma que no deformemos el aspecto del reproductor. Y para ellos
vamos a usar algo que ya nos explicara, en un pasado más o menos lejano, nuestro profesor de matemáticas:
la regla de tres... Vale, ya sé que suena muy técnico y que alguno de ustedes ya habrá empezado a sentir vértigo nada más pensar en lo que les voy a explicar a continuación. ¡Calma! ¡Es súmamente sencillo! ¡Y súmamente gratificante! Si no, piensen que
por fin hallarán una utilidad práctica a la maldita clase de mates que tanto les mortificó en su infancia ;)
···Pero
veamos primero el aspecto de un código HTML. Este es el código para insertar un vídeo de
YouTube; es uno de los más sencillos que he visto, por lo que resulta perfecto para familiarizarnos con este tipo de modificaciones.
Nos interesa aquellas partes en las que se cifra el tamaño del reproductor, es decir su
ancho (width) y su
altura (height); pueden apreciarlas con facilidad porque aquí aparecen resaltadas y, como ven, siempre aparecen juntitas, una detrás de la otra.
······Por supuesto, un ancho de 425 píxeles es excesivo para nuestra barra lateral, sobre todo si nuestro blog no es muy amplio y, consecuentemente, tiene una barra pequeña. Por lo tanto, hay que estrechar el reproductor aminorando ese ancho; creo que
un ancho entre 150 y 180 píxeles os quedará bien; sin embargo,
disminuir el ancho nos obliga también a reducir la altura, lo cual debemos hacer en la misma proporción, para que el reproductor no quede desfigurado.
···Es ahora,
para averiguar la altura que buscamos para nuestro futuro reproductor, cuando
hemos usar la regla de tres, que en este caso se resuelve multiplicando en ancho que queremos dar al reproductor y el alto original y dividiendo el resultado de esa multiplicación entre el ancho original.
······Siguiendo con nuestro ejemplo con el reproductor de
YouTube, si lo que queremos es un reproductor de 150 píxeles de ancho, la operación será 150x344/425, donde los 344 y 425 píxleses son el alto y el ancho del reproductor original respectivamente. El cálculo de la operación da como resultado una altura de 121 píxeles, que será la altura de nuestro futuro reproductor.
Ya lo que queda es tomar el código HTML y hacer las oportunas modificaciones, sustiyendo las viejas medidas por las medidas nuevas.
······A continuación, podéis apreciar el aspecto del coqueto reproductor de YouTube ya insertado... Eso sí, os recuerdo que los vídeos de YouTube no se ponen en marcha automáticamente; tendrán que ser vuestros visitantes los que lo pongan en marcha.
······Ahora que hemos entrado ya en materia, podemos pasar a palabras mayores. Y es que este sistema
funciona igualmente con códigos más complicados, dotados de diferentes elementos con diferentes dimensiones, cuya única dificultad radica en que que nos obligará a poner en práctica la fórmula en más de una ocasión, para cambiar cambiar los píxeles de todos los elementos que encontremos. Sirva de ejemplo el que aparece a continuación: el código HTML de un reproductor
Soundclick (tipo "Premium MP3 player"), con 3 elementos con diferentes medidas...
······O sea, que en este caso tendremos que aplicar 3 veces nuestra fórmula para calcular la altura de los 3 elementos distintos: 150x450/300=225 para el primero, 150x430/300=215 para el segundo y 150x250/300=125 para el tercero, de nuevo para un reproductor de 150 píxeles. Abajo, los cambios sobre el HTML original.
······Y el resultado, perfecto.
······Así que ahora no teneis excusa para poner vuestro propio hilo musical a vuestro blog. Ya sólo os queda encontrar esa web y esa música con la que os sentís indentificado y que mejor se ajuste al espíritu de vuestra página.
···
.jpg)
.jpg)
.jpg)
.jpg)
