Reproducir música de fondo en nuestro blog

Si lo que queremos es que se reproduzca una canción de fondo, sin necesidad de darle al play, sino que simplemente comience a sonar cuando se abra el blog los pasos son los siguientes:
i. Seleccionamos la canción de YouTube que nos interese.
ii. Procedemos como si fueramos a colgar el vídeo completo de YouTube en nuestro blog. Pinchamos en Compartir<Insertar y pinchamos sobre la opción "Utilizar código de inserción anterior". Copiamos dicho código completo, por ejemplo éste:

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/QEllLECo4OM?version=3&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/QEllLECo4OM?version=3&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

- Debemos cambiar, las dos veces en las que aparece, version por autoplay, y el 3 que aparece a continuación del igual por un 1.

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/QEllLECo4OM?autoplay=1&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/QEllLECo4OM?autoplay=1&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

- Una vez hecho lo importante podemos plantearnos que no aparezca la imagen. Para ello simplemente definimos las altura y anchura como de tamaño 0 (en dos lugares nuevamente), quedando así:

<object width="0" height="0"><param name="movie" value="http://www.youtube.com/v/QEllLECo4OM?autoplay=1&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/QEllLECo4OM?autoplay=1&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" width="0" height="0" allowscriptaccess="always" allowfullscreen="true"></embed></object>

- Finalmente mi consejo es que este mismo código lo coloquéis como un gadget en la barra lateral en lugar de en una entrada, pero según vuestras necesidades.


CONSEJO. Esta opción puede ser una buena opción si vuestro blog se adapta a ello. Lo normal es que la música de fondo acabe cansando o distraiga la atención del contenido principal. De poner una música de fondo procurar que sea discreta, sin letra y larga para que se repita constantemente.

VIDEOTUTORIAL. Como reproducir música de fondo de YouTube en Blogger (segunda parte del video, a partir del minuto 5').

Como poner música de YouTube en Blogger

Para reproducir una canción en nuestro blog lo más común es acoplar un reproductor, es decir, introducir el código del mismo, para después permitir que, a través de los controles de los que éste dispone, podamos escuchar la canción en el momento que nos apetezca.

Pero, en esta ocasión proponemos un sistema mucho más rápido y sencillo que nos permitirá escuchar cualquier canción que encontremos en YouTube modificando mínimamente el código de la misma. La idea la encontré en el blog de Mandelrot (al que agradezco la resolución de medidas y del div).

La idea es la siguiente:
i. Vamos a la canción de YouTube que nos interese.
ii. Procedemos como si fuéramos a colgar el vídeo completo de YouTube en nuestro blog. Pinchamos en Compartir<Insertar y copiamos el código completo, por ejemplo éste:

<iframe width="560" height="315" src="http://www.youtube.com/embed/hq2s0AhdFE4?rel=0" frameborder="0" allowfullscreen></iframe>

iii. La altura óptima para reproducir la canción como una línea es 37, por lo tanto modificamos dónde ponía 315 (en mi caso), ponemos 37. Con éste cambio conseguiremos ver los botones de reproducción y el temporizador. Para que el ancho quede perfecto podemos poner 640, quedando así:

<iframe width="640" height="37" src="http://www.youtube.com/embed/hq2s0AhdFE4?rel=0" frameborder="0" allowfullscreen></iframe>

iv. Finalmente incluimos una línea de código nueva si queremos evitar que aparezcan los molestos enlaces de compartir y more info, en la que el nuevo ancho evite esa zona (unos 466 de ancho). Será una línea div (contenedor a nivel de bloque) que nos oculte la parte sobrante:

<div style="overflow: hidden; width: 466px;">
<iframe width="640" height="37" src="http://www.youtube.com/embed/hq2s0AhdFE4?rel=0" frameborder="0" allowfullscreen></iframe>

</div>

OJO! No olvides cerrar el div que acabamos de abrir (</div>).


El resultado es el siguiente:

Pequeña variante en el código para reducir la anchura:

Ejemplo utilizado en el videotutorial:

SABER MÁS. Si quieres saber que indica cada una de las ordenes del código HTML de los videos de YouTube puedes ver un pequeño tutorial aquí.


VIDEOTUTORIAL. Como poner música de YouTube en Blogger.