Una implementación que nunca se me ocurrió relacionada con los vídeos de Youtube es la de utilizarlos como fondos, esto lo podemos lograr muy fácilmente utilizando un plugin jQuery llamado jQuery.mb.YTPlayer.
Este fantástico plugin se configura de forma muy simple, y permite gestionar aspectos básicos relacionados a la reproducción tales como: controles básicos, volumen, opacidad, aspecto, proporción, calidad, bufferIMG.
Una de las preocupaciones lógicas al utilizar un video como fondo es el tiempo de carga, un aspecto que se encuentra perfectamente pensado por el creador del plugin ya que el mismo brinda una serie de mecanismos para gestionar de forma eficiente las demoras y tiempos iniciales de descarga, para ello utiliza imágenes que se muestran mientras el video inicia su reproducción desde Youtube.
Ejemplo de uso:
$(function(){ $(".movie").mb_YTPlayer(); });
El ejemplo que coloque no utiliza ninguna variable y ejecuta un reproductor configurado por defecto, no obstante y si lo que queremos es modificar el aspecto visual del video podemos configurar las imágenes que queremos utilizar como controles, simplemente pasando por parámetro la ruta a los archivos.
- $.YTPlayer.controls.play= “
<img src='images/play.png'>
” - $.YTPlayer.controls.pause= “
<img src='images/pause.png'>
” - $.YTPlayer.controls.mute= “
<img src='images/mute.png'>
” - $.YTPlayer.controls.unmute= “
<img src='images/unmute.png'>
”
En el sitio oficial del plugin pueden ver una demostración de su funcionamiento.
Web: jQuery.mb.YTPlayer
Plugin jQuery para incluir video Youtube a pantalla completa en tu web | colorate
13 años ago
[…] Vía: Kabytes […]
juana
13 años ago
muy buena info, la puse en practica :D… lo que si me quedo en el tintero, y no tiene nada que ver con la info, es lo siguiente: el color este rojo que tenes en los botones y etiquetas del blog, el efecto ese para avejentarlos, como se llama? Ya no se como buscarlo.
Incluir un video (WEBM, MP4, OGV) como fondo usando jQuery | Kabytes
10 años ago
[…] Insertar un video de Youtube como fondo con jQuery […]