Foros del Web » Programando para Internet » Jquery »

Poner video de youtube de fondo de tu web

Estas en el tema de Poner video de youtube de fondo de tu web en el foro de Jquery en Foros del Web. Hola, sinceramente esta comunidad siempre me dio un monton de soluciones, y quisiera compartir algo bastante interesante y que da un efecto muy bueno a ...
  #1 (permalink)  
Antiguo 09/09/2012, 08:06
 
Fecha de Ingreso: abril-2011
Ubicación: Gerona
Mensajes: 602
Antigüedad: 8 años, 6 meses
Puntos: 29
Exclamación Poner video de youtube de fondo de tu web

Hola, sinceramente esta comunidad siempre me dio un monton de soluciones, y quisiera compartir algo bastante interesante y que da un efecto muy bueno a cualquier sitio web.

Aunque el resultado puede ser muy original y atractivo, debo decir que tiene tres inconvenientes: que no se puede silenciar, que si el video tiene anuncios éstos también se mostrarán, y que puede hacer muy lenta la carga del blog, así que si alguien quiere usarlo puede considerar ponerlo sólo en ocasiones especiales, o en blogs que carguen muy rápido.

También se puede hacer en HTML5, el problema es que con ese método se necesita cargar el video en 3 formatos distintos (.mp4, .webm y .ovg) además de una imagen para los navegadores que no lo soporten, así que con esta opción de YouTube me parece más práctica pese a los inconvenientes que tiene.

En este blog de pruebas puedes ver el demo funcionando.

El primer paso es poner justo después de <head> el script:


Código HTML:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* Copyright 2012
|* licensed under the MIT License
|* Enjoy.
|* 
|* Thanks,
|* Sean */

var videoWidth = 853; 
var videoRatio = 16/9; 
var defaultDiv = 'wrapper-video';

jQuery.fn.tubular = function(videoId,wrapperId) {
wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId;
t = setTimeout("resizePlayer()",1000); 

jQuery('html,body').css('height','100%');
jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');
jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});

var ytplayer = 0;
var pageWidth = 0;
var pageHeight = 0;
var videoHeight = videoWidth / videoRatio;
var duration;

var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>'; 

jQuery('#ytapiplayer').html(iframe);
jQuery(window).resize(function() {
resizePlayer();
});
return this;
}

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}

function resizePlayer() {
var newWidth = jQuery(window).width(); 
var newHeight = jQuery(window).height(); 
jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);
if (newHeight > newWidth / videoRatio) { 
newWidth = newHeight * videoRatio; 
}
jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);
}

//]]>
</script>


<script type='text/javascript'>
//<![CDATA[
$().ready(function() {
$('body').tubular('[B][COLOR="Red"]7gZd4b6bXu4[/COLOR][/B]','wrapper-video'); 
});
//]]>
</script>


Luego localiza la etiqueta <body>
Si usas una plantilla del Diseñador de Plantillas entonces busca esta línea:

Código HTML:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'> 
Debajo de cualquiera de ellas dos agrega lo siguiente:

Código HTML:
<div id='wrapper-video'> 
Luego antes de </body> coloca esta etiqueta de cierre:

Código HTML:
</div> 
Guarda los cambios y listo. En color rojo debes poner la ID del video de YouTube, la ID son los caracteres que aparecen al final de la URL:



Recuerda: No tiene opción de silenciar, así que si no quisieras que tenga sonido como en el demo del blog de pruebas tendrás que elegir un video que no tenga sonido. También se recomienda usar un video en HD para que no aparezcan partes negras alrededor del video.
Si ya usaras jQuery elimina las otras versiones que tengas para que no se dupliquen y tengas problemas.
Y si usas Scriptaculous o Mootools deberás aplicar unos cambios a la segunda parte sel primer código que se agrega para que puedas usarlo.
__________________
Marca las mejores webs de internet: Marca
  #2 (permalink)  
Antiguo 09/09/2012, 08:28
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 3 meses
Puntos: 2111
Respuesta: Poner video de youtube de fondo de tu web

Yo es que soy más de Vimeo.

Etiquetas: ajax, funcion, html, javascript, js, video, youtube
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 4 personas




La zona horaria es GMT -6. Ahora son las 22:54.