Insertar videos de Youtube

Esta documentación es para los sites antiguos.

En los new sites es muy similar.

¿Cómo poner un vídeo de YouTube que arranque automáticamente en un momento determinado, y luego se repita una y otra vez? En realidad ésta sería sólo una de las muchas opciones que pueden elegirse a la hora de reproducir un vídeo de esta plataforma, tanto colocándolo en una web como directamente en el navegador. Dedicaremos por tanto este artículo o tutorial a explicar qué opciones hay y cómo hacerlas (actualizado a fecha de 04/03/2013, pues YouTube ha modificado recientemente su configuración).

De esta forma, además de poder usar estas opciones a la hora de poner un vídeo 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 en el navegador, pues son órdenes que se incluyen en la URL del mismo, como veremos.

Decir también que este artículo ha tenido que ser actualizado por tercera vez, pues YouTube ha introducido cambios que han obligado a su revisión. Así mismo, las crecientes diferencias entre los navegadores también han obligado a modificar el artículo (e incluso creo que tendré que ampliar este tutorial con un futuro nuevo post, por razones que después explicaré).

En definitiva, en líneas generales sigue siendo posible lograr los objetivos que aquí se explican, aunque todo es un poco más complicado ahora. Afortunadamente YouTube está facilitando opciones sencillas en su menú de embebido ("insertar" vídeo) para realizar algunas de ellas. En realidad todo se basa en los mismos códigos, como veremos.

Concretamente la lista de posibilidades de reproducción asciende a 21 opciones más o menos combinables. Son las siguientes:

Actualización: ya he escrito el artículo sobre crear e insertar listas de reproducción personalizadas. ¡Ahora podemos alimentar una lista con vídeos de un usuario en particular o con los resultados de una búsqueda! Es muy interesante (o al menos a mí me lo parece). Para leerlo dirigirse a:

Crear listas de reproducción de YouTube personalizadas: por autor, búsquedas...

Respecto a las 21 opciones que desglosé antes, proceden directamente de los desarrolladores de Google (toda la información oficial está en esta web: YouTube Embedded Players and Player Parameters). Es un enlace utilísimo para investigar este tema.

Bien, vamos a ver algunas de las opciones más populares:

• Controles (controls). Podremos mostrar o no los controles en el reproductor del vídeo.

• Inicio automático (autoplay). El vídeo empezará por sí solo al cargar la página.

• Mute. silenciar el sonido

• Repetición o replay (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 (*nota: esta opción no aparece mencionada por los desarrolladores de Google, luego no puedo confirmarla. Funciona en el entorno normal de YouTube (lo he comprobado), pero no se si será lo mismo al insertar el vídeo en una web).

• Iniciar en un punto concreto (start). El vídeo empezará a partir del segundo que indiquemos.

• Acabar en un punto concreto (end). El vídeo terminará en el 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.

• Información relacionada (showinfo). Podrá especificarse si mostrar o no el título del vídeo, el que lo ha subido a YouTube, etc...

• Color del reproductor (theme). Podrá elegirse entre el tono oscuro (por defecto) y otro claro.

• Pantalla completa (fs o fullscreen). Podrá elegirse si se muestra o no el botón de "pantalla completa" durante la reproducción.

• Estas opciones pueden combinarse, aunque algunas no se aceptarán (según la versión del reproductor, y probablemente del navegador, que usemos). Vamos explicar la forma de introducir estas opciones, y de ir añadiéndolas si queremos poner varias.

El ID o "nombre" de los vídeos de YouTube

Para empezar, habremos de tener claro el ID del vídeo que queremos usar (también llamado VIDEO_ID). Es sencillo encontrarlo, y en realidad no es otra cosa que el nombre concreto y único del vídeo (o identificador, de ahí las siglas "ID"). Se compone de una serie de unos 11 caracteres (números y letras). Por ejemplo:

http://www.youtube.com/watch?v=bX3jj0acIZg

En el ejemplo anterior, el ID del vídeo sería "bX3jj0acIZg". Este ID aparecerá siempre en la URL del vídeo, pues es su nombre único, aunque puede estar en diversas posiciones. En cualquier caso siempre aparece y no es difícil de localizar (siempre es la serie de 10-12 caracteres aparentemente sin sentido que aparecen juntos en cualquier tipo de URL de YouTube).

Una vez conozcamos el ID de nuestro vídeo, podremos elegir dos opciones para colocarlo en páginas web, foros, blogs y demás: usar la etiqueta HTML <iframe> (es la opción actualmente por defecto) o el código de inserción antiguo, basado en la etiqueta <object> junto a un reproductor de tecnología Flash.

Las estructuras de URL admitidas por YouTube para mostrar sus vídeos.

INFORMACIÓN IMPORTANTE:

Según informan los desarrolladores de Google, si queremos que el vídeo funcione correctamente, las posibles estructuras que habrá que usar para las URL serán:

1. Para usar <iframe>:

 http://www.youtube.com/embed/VIDEO_ID?

(Nota: ojo con la interrogación ("?") del final, que no forma parte del video_id ni hace falta en realidad para mostrar el vídeo, pero sí es necesaria para añadir opciones de reproducción, como veremos más adelante).

2. Para usar el antiguo código (etiqueta <object>):

 http://www.youtube.com/v/VIDEO_ID?version=3

 O, si nuestro navegador no admite el anterior:

http://www.youtube.com/apiplayer?video_id=VIDEO_ID&version=3

Estas URL se refieren al vídeo en sí, sin el entorno-web de YouTube. Si copiamos y pegamos cualquiera de estas rutas en la barra de direcciones de nuestro navegador (poniendo un video_id real, naturalmente) veremos que se nos abre una ventana exclusivamente con el vídeo en sí. Ejemplo:

http://www.youtube.com/embed/bX3jj0acIZg?

Bien, en principio podremos usar cualquiera de las dos (en realidad tres) opciones estructurales. Sin embargo en la práctica podremos tener algunos problemas con cada una de ellas, así que igual hay que cambiar a otra fórmula para lograr lo que buscamos.

Las dos opciones de código (nueva y antigua) para insertar vídeos de YouTube

Para empezar, para colocar un vídeo de YouTube en una web 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 en algún lugar bajo el vídeo, posiblemente dentro de "compartir", aunque es algo que cambian de cuando en cuando). Al clicar en el botón pertinente 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).

El código que nos dará YouTube será algo como esto:

<iframe width="420" height="315" src="http://www.youtube.com/embed/bX3jj0acIZg" frameborder="0" allowfullscreen></iframe>

 No obstante, si marcamos la opción "código de inserción antiguo", nos facilitará 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>

En la primera posibilidad, la que ahora YouTube usa por defecto, se está usando la etiqueta HTML iframe, prescindiendo de usar el reproductor de Flash. Este cambio se orienta a la implementación progresiva de la última versión de HTML (HTML5) por parte de Google y YouTube. Si marcamos "código de inserción antiguo" se nos facilitará la versión anterior, que aún usa el reproductor Flash de siempre.

Es muy posible que las "guerras" entre formatos preferidos por las compañías (en este caso Google por un lado y Adobe con su la tecnología Flash por el otro) estén actuando en todo este asunto, pero lo cierto es que los diferentes navegadores (Chrome, Firefox, IExplorer, etc...), así como sus diversas versiones, pueden dar problemas a la hora de mostrar vídeos con formas personalizadas de reproducción.

• Ejemplo: Usando la opción de empezar el vídeo en un segundo determinado, y que luego se repita, Firefox reproduce el vídeo desde dicho segundo, pero luego empieza por el principio al repetirlo. Chrome, por el contrario, lo reproduce desde el citado segundo una y otra vez.

• Precaución: Puede ser que YouTube nos facilite un enlace del tipo http://youtu.be/2mENvrVUei4, que no servirá a nuestro propósito. No podremos añadirle parámetros de reproducción. Usar por tanto una de las tres opciones descritas anteriormente.

Añadir opciones de reproducción personalizada al colocar vídeos de YouTube, guía paso a paso.

Bien, llegamos a la parte fundamental de este asunto. Para configurar o personalizar la forma de reproducción de nuestro vídeo iremos 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:

• En este ejemplo el vídeo arranca automáticamente y no pone vídeos relacionados al final. 

http://www.youtube.com/embed/bX3jj0acIZg?&autoplay=1&rel=0 

• Lo mismo que el anterior, pero usando la segunda forma de construir la URL.

http://www.youtube.com/v/bX3jj0acIZg?version=3&autoplay=1&rel=0

Mucho cuidado con la interrogación "?" del final de la ID del vídeo, pues sin ella no funcionará nuestra URL.

Bien, concretemos aún más los ejemplos, según su función:

• Añadir &autoplay=1 para que el vídeo se inicie automáticamente. Ejemplo: 

http://www.youtube.com/v/bX3jj0acIZg?version=3&autoplay=1.

• 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.

• • (Nota: Un amigo visitante llamado Javier comenta que, para reproducir en HD, también puede funcionar añadir &vq=hd720). Lo cierto es que he comprobado una y otra vez esta posibilidad y a mí no me funciona).

• Añadir &start=1 para que el vídeo se inicie en el momento que queramos. Ejemplo:

http://www.youtube.com/v/bX3jj0acIZg?version=3&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?version=3&rel=0.

• Añadir &controls=0 para que no aparezcan los controles en la ventana del reproductor del vídeo. Ejemplo: 

http://www.youtube.com/v/bX3jj0acIZg?version=3&controls=0.

• Combinaciones. Añadir las órdenes una a continuación de la otra, sin espacios.

Para ver todas las opciones disponibles, que son bastantes, dirigirse a la web de los desarrolladores de Google, cuyo enlace antes coloqué (está en inglés pero se entiende lo esencial).

Poner vídeos de YouTube con loop (que se repitan), la opción más problemática.

Podría pensarse que para añadir la opción de loop a los vídeos bastaría con añadir &loop=1, y en efecto antes era así, pero ya no lo es. De hecho es la configuración más problemática, pues es diferente de las anteriores.

Para colocar vídeos que se repitan una y otra vez ahora es necesario valerse de las listas de reproducción, indicando de alguna manera al reproductor que la lista sólo incluye un único vídeo. El formato de la URL es el siguiente:

http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID

Como puede verse, se ha de poner dos veces la ID del vídeo. Siguiendo con el ejemplo anterior, la URL sería:

 http://www.youtube.com/v/bX3jj0acIZg?version=3&loop=1&playlist=bX3jj0acIZg.

Insertando vídeos de reproducción personalizada. Detalles.

Bien, ya tenemos nuestra URL de reproducción personalizada. Por sí sola ya podemos mandarla por e-mail o poner el enlace en cualquier parte (como he hecho yo aquí). No obstante aún queda por detallar el proceso de colocación del vídeo en páginas web, post de blogs, foros, etc... de forma completa. Es decir, insertar directamente una ventana con el vídeo dentro de una web.

En realidad es algo bastante sencillo, si se sigue la lógica anterior. Bastará con buscar en el código de inserción que nos facilita YouTube (el nuevo o el antiguo) la ruta del vídeo. No tiene pérdida, pues es la URL que se encuentra dentro del atributo src, entre comillas.

<iframe width="420" height="315" src="http://www.youtube.com/embed/bX3jj0acIZg" frameborder="0" allowfullscreen></iframe>

De esta forma bastará con añadir a dicha URL, todas seguidas, las órdenes deseadas. Lo mismo que hicimos antes. Es decir, poner dentro del atributo src nuestra propia URL personalizada, siguiendo los pasos que vimos antes.

Los usuarios más avanzados no tendrán ni que ir a YouTube para hacerlo. Si conocen la ID de su vídeo podrán sencillamente colocar una etiqueta iframe con su URL personalizada, allí donde quieran.

Hagamos un ejemplo extremo. Voy a colocar aquí un vídeo en el que no aparezcan los controles, que se repita y que empiece en el segundo 12 (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:

<iframe width="420" height="315" src="http://www.youtube.com/embed/bX3jj0acIZg?&controls=0&loop=1&playlist=bX3jj0acIZg&start=12&loop=1&playlist=bX3jj0acIZg" frameborder="0" allowfullscreen></iframe>

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.

___________________________________________________________________________________________________________

Bueno después de trastear un poco en la pagina de inicio podéis ver el ejemplo practico, habrá que insertar antes el gadget "Embed gadget" y dentro colocaremos el siguiente código, con la pertinentes modificaciones.

<object xmlns="http://www.w3.org/1999/xhtml" height="315" width="420"><param name="movie" value="//www.youtube.com/v/xOBPhUaPXPQ&amp;list=PLa8bR3CyyDohuasbFsmAfbUPZReBFkWf7?&amp;version=3&amp;loop=1&amp;autoplay=1&amp;controls=0&amp;rel=0" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed allowfullscreen="true" allowscriptaccess="always" height="315" src="//www.youtube.com/v/xOBPhUaPXPQ&amp;list=PLa8bR3CyyDohuasbFsmAfbUPZReBFkWf7?hl=es_ES&amp;version=3&amp;&amp;loop=1&amp;autoplay=1&amp;controls=0&amp;rel=0" type="application/x-shockwave-flash" width="420" /></object>

De esta manera podremos centrar el video en su ventana

<center>

<div id="contenido">

<object xmlns="http://www.w3.org/1999/xhtml" height="50" width="160"><param name="movie" value="//www.youtube.com/v/xxxxxxxxxxxxx&amp;list=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx?&amp;version=3&amp;loop=1&amp;autoplay=1&amp;controls=0&amp;rel=0&amp" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed allowfullscreen="true" allowscriptaccess="always" height="50" src="//www.youtube.com/v/xxxxxxxxxxxxx&amp;list=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx?hl=es_ES&amp;version=3&amp;&amp;loop=1&amp;autoplay=1&amp;controls=0&amp;rel=0&amp" type="application/x-shockwave-flash" width="160" /></object>

</div>

</center>

INFORMACIÓN IMPORTANTE:

Par silenciar nuestro video usaremos el siguiente codigo justo detras de la orden

autoplay=1&amp;mute=1&amp;

<center>

<div id="contenido">

<object xmlns="http://www.w3.org/1999/xhtml" height="50" width="160">

<param name="movie" value="//www.youtube.com/v/xxxxxxxxxxxxx&amp;list=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx?&amp;

version=3&amp;

loop=1&amp;

autoplay=1&amp;

mute=1&amp;

controls=0&amp;

rel=0&amp" />

<param name="allowFullScreen" value="true" />

<param name="allowscriptaccess" value="always" />

<embed allowfullscreen="true" allowscriptaccess="always" height="50" src="//www.youtube.com/v/xxxxxxxxxxxxx&amp;list=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx?hl=es_ES&amp;

version=3&amp;

loop=1&amp;

autoplay=1&amp;

mute=1&amp;

controls=0&amp;

rel=0&amp" type="application/x-shockwave-flash" width="160" />

</object>

</div>

</center>

Podemos cambiar en las variables de tamaño, los px por porcentajes: 540 px por 100%. lo que hará que nuestro video se ajuste al marco de site y se adapte en cualquier dispositivo que se utilice para verlo, como un PC o un telefono.