Reproducción automática de vídeos insertados desde YouTube

Cada vez que publico algo sobre un tema, inevitablemente surgen preguntas que no tienen nada que ver con la cuestión concreta pero que están en cierta forma relacionadas. Es el caso del sistema para usar YouTube como reproductor de audio, que ha dado lugar a la pregunta ¿Cómo hacer que un vídeo se reproduzca automáticamente? Cómo la respuesta es sencilla, allá vamos con la solución y su explicación.


Ahora mismo, cuando accedéis a la página de un vídeo, pinchando en Insertar, el servicio os ofrece un código basado en IFRAME (marco dónde se muestra el contenido de otra página), similar a este:

<iframe title="YouTube video player" width="500" height="405" src="http://www.youtube.com/embed/ID_VIDEO?rel=0" frameborder="0" allowfullscreen></iframe>

Además de el código de identificación del vídeo (ID_VIDEO), variarán las medidas de alto y ancho del IFRAME, según las originales de cada vídeo o las que vosotros marquéis, pero lo demás es idéntico en todos los casos.


En este tipo de código, tras la dirección (SRC) del vídeo, se pueden insertar algunas opciones con el símbolo ?, que en el caso del ejemplo consisten en no mostrar los vídeos relacionados (?rel=0). Pues bien, a partir de ahí podemos añadir otros parámetros, como en el caso que nos ocupa, la reproducción automática (autoplay=1), con un & y que para que sea correctamente interpretado en Blogger, añadimos con un &amp;

<iframe title="YouTube video player" width="500" height="405" src="http://www.youtube.com/embed/ID_VIDEO?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

Desde que entrasteis en el post, supongo que ya estáis comprobando que funciona ;) Si lo queréis parar, aquí está el reproductor.

El tiempo parece que no pasa por algunas canciones. Esta tiene casi 50 años.

Aprovecho aquí para comentar que no siempre es buena idea poner los reproductores en modo automático, ya que la mayoría somos mayorcitos y sabemos cuándo queremos oir/ver algo y dónde pinchar para hacerlo.

Hay mucha gente a la que incluso le molesta el audio automático en webs y puede ser que no le siente bien que le obliguéis a oir lo que en ese momento no le apetece. Y no olvidemos que la auto-reproducción, incrementa el tiempo de carga, puesto que en el código normal, esta no se produce hasta que no se pincha en el play. Evidentemente, esto va tanto por los reproductores sólo de audio, como por los de vídeo.

---

La forma de insertar el parámetro autoplay en el código antiguo, basado en OBJECT (para embeber) es muy similar. Como este otro nos permite algunas cosillas más -en las que ahora no vamos a entrar- veamos también cómo se obtiene.

Tras pinchar en Insertar, entre otras opciones, podréis ver un poco más abajo, una casilla de verificación con la leyenda "Utilizar código de inserción anterior". Este código anterior es precisamente el que se usaba hasta hace poco de manera única.

Cuando seleccionáis esa opción, aunque aparentemente no pase nada, el cuadro de texto que contiene el código cambia y en su interior encontramos un HTML basado en OBJECT, en lugar de IFRAME.

El código propuesto en esta ocasión tiene esta estructura:

<object width="560" height="349">&alt;param name="movie" value="http://www.youtube.com/v/ID_VIDEO?fs=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/ID_VIDEO?fs=1&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="349"></embed></object>

Comprobaréis que es mucho más largo que el otro, pero es precisamente porque incluye parámetros y valores que permiten configurarlo.

Aquí, lo que hay que hacer es lo mismo que antes, pero teniendo cuidado de hacerlo en los dos sitios dónde aparecen las direcciones del vídeo. Es indiferente que se haga antes o después de otros parámetros:

<object width="560" height="349"><param name="movie" value="http://www.youtube.com/v/ID_VIDEO?fs=1&amp;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/ID_VIDEO?fs=1&amp;autoplay=1&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="349"></embed></object>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter