En mi caso tengo un video en dos formatos diferentes, uno en .mp4 y otro en .ogv para que sea compatible en diversos navegadores.
Comenzamos con nuestro HTML. debajo podemos ver la estructura de DIV que contiene nuestro video, este DIV puede ir en cualquier parte de nuestro código dentro del BODY.
Ahora le pondremos algo de CSS para que surja el efecto que queremos.
#videoBG{
width: 100%;
height:100%;
position: fixed;
top: 0;
left: 0;
z-index: -1000;
overflow: hidden;
}
ACTUALIZACION IMPORTANTE !!Para que el video se adapte cuando redimensionas el navegador, cambia el código de arriba por este otro
#videoBG{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
}
Con la propiedad fixed hacemos que nuestro div esté fijo y con la propiedad width:100% logramos que nuestro vídeo cubra todo el ancho de nuestra pantalla; con la propiedad z-index:-1000 hacemos que nuestro div que contiene el vídeo se vaya hacía el fondo.
Con estos sencillos pasos logramos colocar un vídeo como fondo en nuestra página web.
Si quieren ver una demostración en vivo pueden pulsar aquí
Y si les gusta ver vídeos :) pues acá está el vídeo
NOTA: existe una script de jQuery llamado BigVideo.js, para usos mas profesionales se los recomiendo
Genial y el único que me sirvió excelente buen trabajo.... Gracias.
ResponderEliminargracias.
ResponderEliminarHola, si quisiera poner la funcion poster para la foto como lo he de agregar, muchas gracias de antemano
ResponderEliminarHola, Osain Alvarez cuando dices la funcion poster estás hablando de BigVideo.js verdad??
ResponderEliminarPues si es asi, lo primero que tienes que hacer es incluir la libreria Modernizr a tu proyecto como complemento a BigVideo.js, luego haces lo siguiente:
var BV = new $.BigVideo();
BV.init();
if (Modernizr.touch) {
BV.show('video-poster.jpg');
} else {
BV.show('video.mp4',{ambient:true});
}
Aqui tienes una prueba : https://dl.dropboxusercontent.com/u/78592996/pruebabg/index.html
ResponderEliminarsi estás en una PC puedes probar con el opera Mobile Emulator con la opcion de touch activada y verás como funciona :D .. espero te pueda servir
Excelente tutorial, muy simple , muy logico aunque a veces uno no lo piense asi.. Gracias por compartir
ResponderEliminarTengo una duda. Lo hice y me funciona en Chrome y Firefox, más no en Explorer ni Android ni Iphone. Que deberia hacer?
ResponderEliminarHola. Como dice en el post. Si quieres una funcionalidad avanzada utiliza algún plugin para eso, en el post propongo Bigvideojs, pruebalo
Eliminar