Tutorial: Personalizar reproductor de Youtube

  • Autor Autor SnakeNet
  • Fecha de inicio Fecha de inicio
S

SnakeNet

Xi
Programador
Personalizar reproductor de Youtube



Esconder la barra de control de un vídeo de Youtube

Si lo que quieres es que el usuario no pueda interactuar con tu vídeo, necesitarás desactivar los controladores. De esta manera, el reproductor quedará más limpio y obligarás al usuario a que vea el vídeo de principio a fin.


El parámetro que se utiliza para esconder los controladores se llama “control”. Por lo tanto, si los queremos esconder deberemos añadir “?controls=0” en nuestro código después de la URL del vídeo.


Insertar CODE, HTML o PHP:
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/qRp3-D3SMwI?controls=0" width="560">

Esconder la información del vídeo de Youtube.

Si no queremos que aparezca la información del vídeo en la parte superior del reproductor, podemos utilizar el parámetro “showinfo” para ocultarla.




Insertar CODE, HTML o PHP:
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/qRp3-D3SMwI?showinfo=0" width="560">

Ocultar el logo de Youtube de la barra de control

Tal vez pensastes que nunca podríamos borrar del mapa todo rastro de la Marca Youtube? Casi se puede… Y el paso definitivo para que no parezca que alojas los vídeos en Youtube es ocultar su logo. Para ello, utilizaremos el comando “modestbranding” y le daremos el valor 1.




Insertar CODE, HTML o PHP:
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/qRp3-D3SMwI?showinfo=0&modestbranding=1" width="560">

Y todo completo:


Insertar CODE, HTML o PHP:
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/qRp3-D3SMwI?controls=0&modestbranding=1&showinfo=0" width="560">

DEMO

 
[MENTION=121168]SnakeNet[/MENTION] Gracias por el tutorial 🙂
 
Al archivo, muchas gracias
 
Gracias por el tutorial, mi aprendizaje del día. Lo he puesto como norma desde que entre al foro, y así cada día crecemos y estamos en actividad mental:encouragement:.
 
el tuto esta muy bueno pero ciempre muestra el logo de youtube y nos lleva a youtube
 
Buen tutorial 😛8:
 
Muy bueno aunque no me quedo muy claro, soy nuevo haciendo videos y no se de eso, pero si es posible si subes capturas del resultado ala par de cada codigo se te agradeceria

Esta la demo carga cada uno y verás la diferencia en cada uno de ellos.
 
Porfa perdona la pregunta, pero la demo carga es en youtube o en tu publicacion? la verdad no se nada de esto :ambivalence:
La DEMO te lleva a una blog donde verás diferentes reproductores de youtube que cuando los cargas unos los hacen sin barra, otros sin logo y así...
 
Genial aporte gracias :encouragement:


Sent from my Nokia Lumia 520 using Tapatalk
 
Para los que prefieran la versión HTML5 🙂

<iframe width="100%" height="400" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/yOUwcet_X6Y?autoplay=1&html5=1&autohide=1&rel=0&theme=light&showinfo=0&modestbranding=1">
 
Me lo pongo en favoritos 😀
 

Temas similares

A
Respuestas
3
Visitas
296
akirakenji
A
Respuestas
2
Visitas
160
Jusosard
M
Respuestas
5
Visitas
257
Luis Eduardo Jaimes H