Atención bloggers: cómo usar YouTube como reproductor mp3 (actualizado con las medidas del nuevo reproductor)

(Nota: si quieren ahorrarse explicaciones e ir directamente al código para cortar y pegar, vayan al final donde pone "bonus" y ahí lo tienen directamente)

Cuando se me ocurrió esta idea tan sencilla como efectiva tuve dos reacciones: la primera pensar "pero qué tonto, cómo no lo había pensado antes" y la segunda buscar en Google a ver si era algo que ya hubieran publicado por ahí. No la he visto por ninguna parte, pero es tan simple que me parece imposible que no la supiera todo el mundo ya... Como sé que habrá muchos bloggers que como yo alguna vez han pensado en esto y agradecerían mucho una solución así he decidido publicarlo para ayudarles aunque no suelo publicar sobre temas tan técnicos (con alguna excepción). Vamos allá:

YouTube nos da un código para que insertemos los vídeos en nuestra web, que viene a ser algo así:

<iframe title="YouTube video player" width="640" height="510" src="http://www.youtube.com/embed/5HzqoNZMlNo?rel=0" frameborder="0" allowfullscreen></iframe>

El numerito en rojo es la altura (height) que va a tener la ventana del vídeo, en este caso es de 510 píxeles; hace algún tiempo Adrián me dio una excelente idea porque me contó que, si reducías ese valor cambiándolo a 24 (me dijo 25, pero para esto queda mejor con 24), podías dejarlo justo en lo que ocupan de alto los botones dejando fuera la imagen. Se quedaría en algo así:



Pero claro, aquí el problema es que los botones de la derecha nos sobran, que resulta que ocupan 174 píxeles de ancho y que aunque cambiemos las dimensiones del reproductor siempre están ahí. La barra completa en este caso ocupa 640px, y si logramos quitarle esos 174 que no queremos se nos quedaría en 466... ¿Pero cómo hacemos para eliminarlos?

Esto se consigue metiendo el código en una "caja" hecha con la etiqueta DIV a la que le damos un ancho de la medida del reproductor... menos esos 174 de los botones que no queremos, y diciéndole que lo que sobre no se vea (overflow:hidden). El código quedaría así:

<div style="overflow: hidden; width: 466px;">
<iframe allowfullscreen="" frameborder="0" height="27" src="http://www.youtube.com/embed/5HzqoNZMlNo?rel=0" title="YouTube video player" width="640"></iframe></div>

Si se fijan, aquí lo que vemos es el mismo código de YouTube pero rodeado por una etiqueta DIV por delante y su cierre detrás. Ustedes pueden poner el reproductor del ancho que quieran, más corto o más largo, simplemente recuerden que el ancho del DIV tiene que ser 174 píxeles menor que el ancho del reproductor de YouTube para que los botones malditos queden fuera y no se vean.

Bonus: los que tengan gustos minimalistas como yo si lo siguen reduciendo lo pueden dejar en 58 y así les quedará el botón "Play" y nada más. Aquí les dejo tal cual el código "estándar" que tengo yo para hacerlo así:

<div style="overflow: hidden; width: 58px;">
(CÓDIGO DE YOUTUBE CON "HEIGHT" A 24PX)
</div>

Elegante, ¿eh? Se acabó pelearse con servicios de música online, buscar servidores para alojar los ficheros mp3 y depender de archivos externos... ¡Que suene la música!

(Nota: si tienen problemas técnicos, otras dudas con sus webs o quieren aprender más, yo no puedo ayudarles ni responder sus preguntas pero hay gente que sí sabe de verdad y les recomiendo visitar sus blogs: Vagabundia, Blog and Web, Gema y muchos más)