Tutorial: Personalizar reproductor de Youtube

S

SnakeNet Seguir

Xi
Programador
Personalizar reproductor de 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.


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

​
 
LuiggiC

LuiggiC Siguiendo

Ómicron
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
[MENTION=121168]SnakeNet[/MENTION] Gracias por el tutorial 🙂
 
N

niemar2001 Seguir

Gamma
Redactor
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:.
 
O

omar2160 Seguir

No recomendado
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
el tuto esta muy bueno pero ciempre muestra el logo de youtube y nos lleva a youtube
 
Carambel

Carambel Seguir

Ómicron
Social Media
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Genial aporte gracias :encouragement:


Sent from my Nokia Lumia 520 using Tapatalk
 
F

FrangaL Seguir

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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">
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba