En esta ocasión quiero compartir un plugin muy interesante de jQuery que encontré navegando por la Web: Tubular Plugin. Éste coloca un video de YouTube cualquiera que elijas como fondo de tu página Web.
Tubular Plugin a su vez nos da la opción de colocar controles para el video, para poder detenerlo, pausarlo o silenciar el audio.
Primero descargamos el plugin Tubular. Dentro de nuestras etiquetas <head> </head>, colocamos o llamamos los archivos que están dentro de la carpeta js del archivo .RAR que bajamos. Entonces llamamos los archivos así:
Código :
<head> <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="js/swfobject.js" type="text/javascript"></script> <script src="js/jquery.tubular.js" type="text/javascript"></script> <script src="js/mission-control.js" type="text/javascript"></script> </head>
Creamos las siguientes capas o DIVS dentro de nuestras etiuqetas <body> </body> de la siguiente manera:
Código :
<body> <div id="wrapper"> <p id="video-controls"><span class="azulita">Controles:</span> <a class="videoPaused" href="" id="videoPause">Pausar / Reproducir</a> | <a href="" id="videoMute">Sonar / Silenciar</a> | <a href="" id="videoStop">Detener Video</a></p> <div id="contenido"> <p>Bienvenidos a esta demo !</p> <p>El Plugin <a href="http://www.seanmccambridge.com/tubular/" target="_blank">Tubular</a> de jQuery me hace pensar decir que: jQuery es impresionante y no tiene limites.</p> <p>VIDEO: Go Let it Out - Oasis</p> </div> </div> </body>
Creamos nuestra Hoja de estilos CSS, para los nombres o id de las capas o divs correspondientes:
Código :
<style type="text/css">
#video-controls {
color: #FFF;
background-color: #F06;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
position: absolute;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 20px;
left: 19px;
top: 40px;
}
#video-controls a:link {color: #FFF; text-decoration:none;}
#video-controls a:visited {color: #FFF; text-decoration:none;}
#video-controls a:hover {color: #FFF; text-decoration:none;}
#video-controls a:active {color: #FFF; text-decoration:none;}
.azulita {
color: #039;
font-weight: bold;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000;
}
#contenido {
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
color: #FFF;
position: absolute;
left: 23px;
top: 118px;
width: 622px;
background-image: url(img/bg-texto.png);
background-repeat: repeat;
padding: 15px;
}
a:link {
color: #F06;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #F06;
}
a:hover {
text-decoration: underline;
color: #F06;
}
a:active {
text-decoration: none;
color: #F06;
}
</style>
Abrimos nuestro archivo mission-control.js que vino dentro del archivo RAR que descargamos de la página del Plugin, y nos fijamos en la 2da línea donde dice:
Código :
$().ready(function() {
$('body').tubular('[b]AzNZaIYce-U[/b]','wrapper');AzNZaIYce-U : es el ID del video de youtube que vamos a reproducir.
Por ejemplo:
Si tenemos el siguiente video:
:
http://www.youtube.com/watch?v=AzNZaIYce-U
la ID sería lo que esta después de v= : AzNZaIYce-U o lo que está en negrita. El video por defecto carga sin sonido, el cual lo podemos activar con el botón Sonar/Silenciar.
Y listo! con eso ya hemos finalizado y todo queda listo para usar!
Acá les dejo un demo:
DEMO
Espero les haya gustado.
Cristalab y Mejorando.la te traen el increíble Curso de Estrategia Digital y Marketing. Online, a tu ritmo, con diploma de certificación y clases en vivo.
Por aces el 21 de Marzo de 2012
Por Roger Martinez el 21 de Marzo de 2012
Por hans el 21 de Marzo de 2012
Por paulo silva el 21 de Marzo de 2012
paulo silva-blog :
Hola =)
Lo que dices es raro raro, por default el video se reproduce con un loop, es decir terminado de reproducirse el video se vuelve a reproducir y no le da tiempo para mostrar las miniaturas.
Kinduff :
Gracias Kinduff
=)
pepoflex :
Kinduff :
De nada Kinduff
=)
Por kkk el 22 de Marzo de 2012
kkk-blog :
Hola.
Para que el sonido venga activado por default, abre el archivo jquery.tubular y busca la linea donde dice:
// player calls this function on ready
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute(); <-------------------------------- Esta linea (linea 48 mas o menos)
}
Modifica ytplayer.mute(); por ytplayer.unmute(); (cambia mute x unmute) .
pepoflex :
kkk-blog :
Hola.
Para que el sonido venga activado por default, abre el archivo jquery.tubular y busca la linea donde dice:
// player calls this function on ready
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute(); <-------------------------------- Esta linea (linea 48 mas o menos)
}
Modifica ytplayer.mute(); por ytplayer.unmute(); (cambia mute x unmute) .
No olvides presionar F5 para actualizar el contenido y te carge con el sonido activado, luego que editastes tu archivo jquery.tubular.js
Código :
$().ready(function() {$('body').tubular('AzNZaIYce-U','wrapper');}damn the copy paste
ANTES:
Les habia puesto las : ( b--> AzNZaIYce-U <--/b] ) <--- b y /b
Código :
$().ready(function() { $('body').tubular('[b]AzNZaIYce-U[/b]','wrapper');AHORA:
Código :
$().ready(function() { $('body').tubular('AzNZaIYce-U','wrapper');LES QUITASTES LAS b y /b , que estaban de mas. Solo para aclarar.
Gracias men
Por el 22 de Marzo de 2012
Por el 23 de Marzo de 2012
y q onda con la publicidad q sale abajo... como se puede saber que videos no tienen publicidad?
Con respecto a una lista, si es posible hacerlo pero tendrías que editar los archivos js, ya eso deénde de lo que quieras lograr.
Por dudoso el 23 de Marzo de 2012
A mi si se me muestra la publicidad de abajo, algunas veces si y otras veces no cuando cargo la pagina..... pero siempre se me muestra cuando el vídeo termina y comienza de nuevo
- Elige videos de youtube que no tngan publicidad, siempre hay distintos videos.
Por ignacio85r el 26 de Marzo de 2012
Por brenda el 27 de Marzo de 2012
http://www.jrcl.16mb.com/tutoriales/video_de_youTube_como_fondo_web_con_jquery/index.php
no se olviden presionar el botón Sonar en la pagina demo, para que puedan escuchar el sonido, ya que lo carge con el sonido apagado.
Por zatu el 20 de Octubre de 2012
http://jrcl.net76.net/dm/video_de_youTube_como_fondo_web_con_jquery/index.php