Mostrar vídeos de YouTube con loop, autoarranque, HD, sin relacionados o en un punto exacto
Es una duda que se me ha planteado recientemente. ¿Cómo poner un vídeo de YouTube que arranque automáticamente? En este pequeño tutorial vamos a ver que es posible hacerlo de forma sencilla, y además que podremos establecer algunas opciones añadidas.
Además de poder usar esto en posts (blogs, foros, etc…) o en nuestras páginas web, también nos servirá a la hora de, simplemente, reproducir un vídeo en YouTube, pues son órdenes que se incluyen en la URL del mismo.
Concretamente la lista de posibilidades de reproducción es la siguiente (si alguien conoce alguna más que la comente para añadirla):
- Inicio automático (autoplay). El vídeo empezará por sí solo al cargar la página.
- Repetición (loop). El vídeo se repetirá una y otra vez.
- Alta definición (HD). Cuando sea posible, el vídeo se mostrará en alta definición.
- Iniciar en un punto concreto. El vídeo empezará a partir del segundo que indiquemos.
- Sin vídeos relacionados. Por defecto YouTube mostrará los vídeos relacionados al concluir el vídeo. Con esta opción podemos desactivar esto.
Todas estas opciones pueden combinarse de la forma que queramos, incluso todas a la vez. Vamos explicar la forma de hacerlo:
Para empezar existe un procedimiento común. Hay que buscar el código de inserción que YouTube nos facilita (está en el botón “insertar” que encontraremos bajo el vídeo). Al clicar en el botón se nos generará un código que podremos copiar en el HTML de cualquier sitio que nos permita acceso a esta posibilidad (foros, blogs, etc… Cuidado que este código no nos valdrá para Facebook).
Sin embargo si queremos personalizar más la ventana de reproducción (inicio automático, aparición o no de vídeos relacionados, HD, etc…) este código tal cual no nos va a valer. Haremos lo siguiente:
El código que nos dará YouTube será algo como esto:
<object width="480" height="385"><param value="http://www.youtube.com/v/bX3jj0acIZg&hl=es_ES&fs=1&" name="movie"></param><param value="true" name="allowFullScreen"></param><param value="always" name="allowscriptaccess"></param><embed src="http://www.youtube.com/v/bX3jj0acIZg&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object> Lo que hay que hacer es quitar
object y sus parámetros y quedarnos sólo con la etiqueta embed. Nos quedaría el código siguiente: <embed src="http://www.youtube.com/v/bX3jj0acIZg&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed> Este código se refiere al vídeo en sí, sin la consola de YouTube. Si copiamos y pegamos la ruta entre comillas del atributo src en nuestro navegador (en el ejemplo sería http://www.youtube.com/v/bX3jj0acIZg&hl=es_ES&fs=1&) vemos que nos abre una ventana exclusivamente con el vídeo en sí (clicar para ver el ejemplo).
Bien, ahora podremos configurarlo. Lo haremos añadiendo órdenes a la URL del vídeo, separadas por signos “&”. Se van poniendo justo al final de la ruta, sin borrar nada.
Veamos unos ejemplos que es como mejor se entiende:
- Añadir &autoplay=1 para que el vídeo se inicie automáticamente. Ejemplo: http://www.youtube.com/v/bX3jj0acIZg&hl=es_ES&fs=1&autoplay=1.
- Añadir &loop=1 para que el vídeo se repita indefinidamente. Ejemplo: http://www.youtube.com/v/bX3jj0acIZg&hl=es_ES&fs=1&loop=1. No es posible indicar el número de repeticiones, introduciendo esta orden el vídeo se repetirá una y otra vez.
- Añadir &hd=1 para que el vídeo se muestre en Alta Definición (si está disponible en esa versión, claro está). Ejemplo: http://www.youtube.com/watch?v=HEheh1BH34Q&hd=1.
- Añadir &start=1 para que el vídeo se inicie en el momento que queramos. Ejemplo: http://www.youtube.com/v/bX3jj0acIZg&hl=es_ES&fs=1&start=15. El vídeo en este caso empezará en el segundo 15. Por supuesto podemos introducir el segundo concreto que queramos.
- Añadir &rel=0 para que no aparezcan los vídeos relacionados al acabar el vídeo. Ejemplo: http://www.youtube.com/v/bX3jj0acIZg&hl=es_ES&fs=1&rel=0.
- Combinaciones. Añadir las órdenes una a continuación de la otra, sin espacios.
De esta forma podremos poner nuestra etiqueta
<embed> con las características que elijamos. Bastará con añadir, todas seguidas, las órdenes deseadas. De igual forma podemos copiar sólo la URL modificada directamente en nuestro navegador, para verlo con las opciones que queramos de entre las antes descritas. O enviarla por correo electrónico, por ejemplo.
Hagamos un ejemplo extremo. Voy a colocar aquí el código para que no aparezcan los vídeos relacionados, que se repita y que empiece en el segundo 19 (no lo pongo en HD porque no dispongo de él, si no lo pondría también). Al final de la URL del vídeo añadimos todas las órdenes. Éste será el código:
<embed src=http://www.youtube.com/v/bX3jj0acIZg&hl=es_ES&fs=1&rel=0&loop=1&start=19 type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed> Y éste el vídeo resultante:
(Nota: no le he puesto autoplay porque cuando llegarais aquí ya estaría por la mitad y no se apreciaría, pero podéis verlo en el ejemplo de antes. No ha tenido mucho sentido quitarle los vídeos relacionados, pues como veis no acaba nunca, pero bueno).
Poner vídeos en Facebook con autoplay, HD, loop, etc…
En cuanto a colocar un vídeo de YouTube en Facebook –algo sobre lo que se me está preguntado mucho últimamente- ya os advierto que no es posible establecer allí que los vídeos arranquen automáticamente. Facebook no permite autoplay de objetos Flash (como son los vídeos de YouTube). Por lo visto tampoco de JavaScript. Podemos establecer todas las opciones aquí descritas, pero habrá que hacer click en el vídeo para que empiece.
Además Facebook requiere sus propios códigos para implementar vídeo.
Lo explico todo en el artículo del enlace anterior. No os lo perdáis si os interesan estos temas, pues estoy recopilando muchísima información sobre estas pestañas de la conocida red social, incluyendo el código necesario para colocar vídeos. Seguro que os resulta útil si tenéis alguna duda en este sentido.
