¿Como ponemos un video de fondo de pantalla?

Con HTML5 podemos colocar de fondo de nuestra pagina web un video y realmente las pagina se ven espectaculares, pero hay que tener algunos aspectos antes de ver si nos conviene o no.

Primero:
Sin duda alguna se ve espectacular, pero tenemos que elegir con cuidado el tema del video, recuerda que es un fondo y debe realzar el contenido no opacarlo.

Segundo:
La experiencia de usuario es sumamente importante, no es recomendado hacer esta practica en todas las paginas de nuestro sitio web debido a que siempre baja la velocidad de carga y ejecución, lo mas recomendado es solo usar en la pagina de aterrizaje o presentación para atraer al usuario, pero repito es más importante el rendimiento que la belleza, siempre hay que lograr un equilibrio.

Tercero:
Y relacionado con el anterior punto, el tamaño (resolución hd,web, etc) y formato(mp4,ogg,webM, etc) que usemos tiene que ser el mas pequeño posible que nos brinde la mejor calidad de visualización, un video pixelado es peor que ningúno.

Puedes descargar este ejemplo en el enlace de descargas del curso avanzado dentro de la carpeta ejemplos.

Empecemos:
index.html

El atributo POSTER, muestra una imagen mientras se carga el video.
La etiqueta <source> especifica el nombre del archivo de video.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Video</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

    <script src="main.js"></script>

</head>

<body>

    <video id="videoFondo" poster="poster.jpeg" autoplay loop preload="auto">

        <source src="fondo.mp4" type="video/mp4">

    </video>

    <h1>Esto es una prueba de Video de Fondo</h1>

    <hr>

    <section>

        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. 

            Numquam ipsam fugit in sequi totam a, repellendus dolore possimus 

            iusto hic officiis, facere laboriosam earum blanditiis expedita?

            Cupiditate soluta similique optio!

        </p>

    </section>

</body>

</html>

main.css
El atributo position:fixed; hace que la posicion se fija.
Los atributos Left y Top la colocan en la esquina superior izquierda.
Luego establecemos el tamaño minimo y que se ajuste al tamaño de nuestra ventana
y z-index determina el lugar dentro de la ventana, si es negativo lo coloca hacia el fondo, positivo lo coloca hacia el frente.

body {

    margin: 0;

    padding: 0;

    color:white;

}

#videoFondo {

    position: fixed;

    left:0;

    top:0;

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    z-index: -10;

    visibility: visible;

}