Personalizar el Reproductor de YouTube con iframe

Muchos webmasters insertan los videos de YouTube en sus páginas web y desde hace ya un tiempo el portal de videos viene proporcionando nuevas etiquetas que aprovechan mejor las ventajas de HTML5.

El algunos otros sitios web se hace referencia a estos mismos parámetros, pero no funciona correctamente porque simplemente usan el carácter separador ? en lugar del & que es el que funciona correctamente, veamos un ejemplo:


<iframe width="480" height="360" src="http://www.youtube.com/embed/h_Iy4YZ1bYE?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>




Veamos el video (elegido aleatoriamente)


Este video según los parámetros: «rel=0 no mostrará al final los videos relacionados» y según «showinfo=0 no mostrará el título en la parte superior».

Esta es la lista completa de parámetros que podemos usar con el iframe:


rel (Valores: 0 o 1)  El valor predeterminado es "1". Define si el reproductor debe cargar vídeos relacionados una vez comenzada la reproducción del vídeo inicial. Los vídeos relacionados aparecen en el "menú genio" cuando se pulsa el botón de menú. Si rel se establece en 0, la función de búsqueda del reproductor quedará inhabilitada.

autoplay (Valores: 0 o 1) El valor predeterminado es "0". Define si el vídeo inicial se reproducirá automáticamente o no cuando se cargue el reproductor.

loop (Valores: 0 o 1) El valor predeterminado es "0". Si solo hay un reproductor de vídeo y se establece el valor 1, el reproductor reproducirá el vídeo inicial una y otra vez. En el caso de un reproductor de listas de reproducción (o reproductor personalizado), el reproductor reproducirá la lista de reproducción completa y, a continuación, comenzará de nuevo la reproducción del primer vídeo.

enablejsapi (Valores: 0 o 1) El valor predeterminado es "0". Si se establece en 1, el API de JavaScript quedará habilitada. Para obtener más información sobre el API de JavaScript y sobre cómo utilizarla, consulta la documentación del API de JavaScript.

playerapiid. El valor puede ser una cadena alfanumérica. Esta configuración se utiliza junto con el API de JavaScript. Para obtener más información detallada, consulta la documentación del API de JavaScript.

disablekb (Valores: 0 o 1) El valor predeterminado es "0". Si se establece en 1, los controles de teclado del reproductor quedarán inhabilitados. Los controles de teclado son los siguientes:
     Barra espaciadora: permite reproducir/pausar.
     Flecha izquierda: permite retroceder un 10% en el vídeo actual.
     Flecha derecha: permite avanzar un 10% en el vídeo actual.
     Flecha hacia arriba: permite subir el volumen.
     Flecha hacia abajo: permite bajar el volumen.

egm (Valores: 0 o 1) El valor predeterminado es "0". Si se establece en 1, el "menú genio avanzado" quedará habilitado. Este comportamiento hace que el menú genio (si está presente) aparezca cuando el ratón del usuario entre en el área de visualización del vídeo, en oposición a que solo aparezca cuando se pulse el botón de menú.

border (Valores: 0 o 1) El valor predeterminado es "0". Si se establece en 1, se habilitará un borde alrededor de todo el reproductor de vídeo. El color principal del borde se puede establecer mediante el parámetro color1. También puede establecer un segundo color mediante el parámetro color2.

color1, color2 (Valores: todos los valores RGB aparecen en formato hexadecimal) color1 es el color principal del borde, y color2 es el color de fondo de la barra de control del vídeo y el color secundario del borde.

start (Valores: un número entero positivo) Este parámetro permite que el reproductor inicie la reproducción del vídeo en el número exacto de segundos proporcionados desde el comienzo del vídeo. Ten en cuenta que, de forma similar a la función seekTo, el reproductor buscará el fotograma más cercano al momento especificado. Esto significa que a veces es posible que el cabezal de reproducción se sitúe justo antes del punto solicitado; normalmente la diferencia no supera los 2 segundos aproximadamente.

fs (Valores: 0 o 1) El valor predeterminado es "0". Si se establece en 1, el botón de pantalla completa quedará habilitado. No funciona en el navegador sin bordes. Ten en cuenta que es necesario incluir algunos argumentos adicionales en el código insertado para que funcione. Las partes en negrita del ejemplo que aparece a continuación habilitan la función de pantalla completa:

<object width="425" height="344">
<param name="movie" value="https://www.youtube.com/v/u1zgFlCw8Aw?fs=1"</param>
<param name="allowFullScreen" value="true"></param>
<embed src="https://www.youtube.com/v/u1zgFlCw8Aw?fs=1"
  type="application/x-shockwave-flash"
  allowfullscreen="true"
  width="425" height="344">
</embed>
</object>

hd (Valores: 0 o 1) El valor predeterminado es "0". Si se establece en 1, la reproducción en alta definición quedará habilitada de forma predeterminada. No funciona en el navegador sin bordes. Tampoco funcionará si no está disponible una versión en alta definición del vídeo. Si habilitas esta opción, ten en cuenta que los usuarios que tengan una conexión más lenta disfrutarán de una calidad inferior a menos que desactiven la opción de alta definición. Debes asegurarte de que el reproductor tenga el tamaño suficiente como para reproducir el vídeo en su resolución original.

showsearch (Valores: 0 o 1) El valor predeterminado es "1". Si se establece en 0, la aparición del cuadro de búsqueda cuando el vídeo está minimizado quedará habilitada. Ten en cuenta que si el parámetro rel se establece en 0, el cuadro de búsqueda también quedará inhabilitado, independientemente del valor de showsearch.

showinfo (Valores: 0 o 1) El valor predeterminado es "1". Si se establece en 0, el reproductor no mostrará información como, por ejemplo, la clasificación y el título del vídeo antes de que este empiece a reproducirse.

iv_load_policy (Valores: 1 o 3) El valor predeterminado es "1". Si se establece en 1, las anotaciones de vídeos se mostrarán de forma predeterminada, mientras que si se establece en 3, las anotaciones de vídeos no se mostrarán de forma predeterminada.

cc_load_policy (Valores: 1) El valor predeterminado se basa en las preferencias del usuario. Si se establece en 1, los subtítulos cerrados se mostrarán de forma predeterminada, aunque el usuario haya desactivado los subtítulos.

Comentarios

  1. La propiedad fs=1 está programada para que funcione, al hacer clik el reproductor no se hace a pantalla completa y se deshabilita el botón Fullscreen. Estoy haciendo un reproductor con html5 y css3 que sea responsive y que cambie el tamaño del reproductor de acuerdo al tamaño de pantalla del dispositivo. El object es de tipo AS3 de acuerdo a lo que he leído y tiene inconveniente con móviles que no son compatibles con Flash. Puede ayudarme

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Superponer una imagen sobre otra con CSS

¿Ganas dinero en Facebook con Página, Grupo, Comunidad, etc?

Script para buscar palabras o textos en una página (html) con Jquery