Tutorial: Personalizar reprodutor do Youtube

  • Autor Autor SnakeNet
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
S

SnakeNet

Xi
Programador
Personalizar reprodutor do Youtube

O0KnPzU.png


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.


Inserir CODE, HTML ou 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.




Inserir CODE, HTML ou 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.




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

Y todo completo:


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

DEMO

​
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
[MENTION=121168]SnakeNet[/MENTION] Gracias por el tutorial 🙂
 
Gracias 🙂
 
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 😀
 

Tópicos similares

A
Respostas
3
Visitas
296
akirakenji
A
Jusosard
Respostas
2
Visitas
160
Jusosard
Jusosard
M
Respostas
5
Visitas
257
Luis Eduardo Jaimes H
Luis Eduardo Jaimes H
Voltar
Topo