Vídeos de YouTube a pantalla completa con HTML5
Una entrada rápida a raíz de un tweet que he puesto esta mañana:
Si insertas vídeos de YouTube en tu blog, añade el parámetro fs=1 a la URL. Saldrá el botón fullscreen a los que usamos HTML5 por defecto.
— Alejandro Romero (@alerom) septiembre 14, 2012
También lo puse en inglés para mis seguidores angloparlantes (si es que tengo alguno):
If you insert YouTube videos in your blog, add fs=1 to the URL to show fullscreen button to people using HTML5 by default. Thanks
— Alejandro Romero (@alerom) septiembre 14, 2012
Aprovecho que aquí puedo extenderme más para explicarlo un poco mejor. Yo tengo configurado YouTube para que me muestre los vídeos usando HTML5 en lugar de Flash siempre que sea posible y llevaba tiempo llamándome la atención que cuando veía vídeos insertados en una web, unas veces salía el botón para ponerlo a pantalla completa y otras no, lo cual era un engorro. Hoy me dio por buscar cuál podía ser la causa y encontré que era un simple parámetro, el fs que menciono en los tweets. También hay que añadir webkitallowfullscreen y mozallowfullscreen al allowfullscreen que ya nos dan en YouTube para que el botón funcione correctamente en Safari, Chrome y Firefox.
Así que si para insertar un vídeo usáis un código del tipo:
<iframe width="560" height="315" src="http://www.youtube.com/embed/cFv2xPvQfJ4" allowfullscreen></iframe>Tendríais que cambiarlo a:
<iframe width="560" height="315" src="http://www.youtube.com/embed/cFv2xPvQfJ4?fs=1" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>Ejemplo sin fs=1, webkitallowfullscreen ni mozallowfullscreen:
Ejemplo con fs=1, webkitallowfullscreen y mozallowfullscreen:
Si veis los 2 vídeos iguales seguramente será porque estáis usando Flash y no HTML5, para cambiarlo solo tenéis que activar el Reproductor de vídeo HTML5 de YouTube.
10 comentarios
Y la diferencia es.. un botón de pantalla completa?
Vaya chorrada eso se podía hacer antes, ya.
No le veo lógico.
El problema es que en el código de inserción por defecto que proporciona YouTube, no están los parámetros que menciono en la entrada.
Si en YouTube usas el reproductor Flash, que es lo normal, verás siempre el botón de pantalla completa. Pero si lo tienes configurado para usar el reproductor HTML5, como es mi caso, y quien haya insertado el vídeo ha usado el código que da YouTube, entonces no lo podrás poner a pantalla completa y tendrás que ir ver el vídeo directamente a YouTube para poder hacerlo.
Excelente aport!, ya lo hemos adaptado de manera global a nuestros videos y funciona perfectamente.
Saludos y gracias!
Gracias a ti por usarlo en tu web.
tengo un blog, e inserto videos de youtube y drive, pero en moviles no aparece el boton de pantalla completa, es el mismo metodo, para corregirlo en moviles. ( ipad, celulares etc)
Gracias, me sirvio!! Saludos!
Gracias por el dato, en todas partes decìan que tenìa que activar no se que del chrome o del firefox y que una extenciòn, puras chorradas. Al final sòlo faltaba agregar esas no sè si llamarles propiedades. Saludos.
Muchas gracias, me funciono de maravilla 🙂
Hola amigo, veo que este tema es muy viejo, pero quiero hacer una consulta. Compare este codigo con el de un tema y veo que usa un codigo que este no tiene. Dicho codigo es para que la imagen aparezca en la parte superior, y no debajo, ya que asi es como funciona el tema. Pero no permite visualizar el video por completo. Te dejare el codigo:
Cuando invoco el codigo para que se vea en la parte superior, no permite visualizar el video. Pero si lo quito si lo permite, pero queda junto a la descripsion. Agradeceria me ayudaras a resolver este inconveniente y poder visualizar el video a panttalla completa teniendo este codigo. Saludos!
Funciona