Cómo crear un Background Video Fullscreen con HTML5 y CSS

El elemento vídeo de HTML5 es soportado actualmente en más del 80 por ciento de los navegadores, estas estadísticas nos da la seguridad de sacar provecho a este tag y ser muy creativos al momento de integrar nuestros videos en alguna landing page, pagina web o lo que queramos.

En este tutorial video background fullscreen con HTML5 crearemos un homepage muy sencillo, sin muchos elementos donde colocaremos un video de fondo reproduciéndose siempre y ocupando siempre el total de la pantalla, en este ejercicio no tenemos necesidad de jQuery ni JavaScript, solo lo lograremos con HTML5 y un poco de CSS.

En el siguiente video te lo explico detalladamente:

A continuación los códigos fuente del ejercicio.

El HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<header>         <div class="puntos_bg">             <div class="barra-superior">                 <p class="texto-titulo">Lorem ipsum dolor sit amet</p>             </div>         </div>         <div id="logo">             Tutorial video fullscreen con HTML5         </div>     </header>     <video id="video1" loop autoplay preload poster="images/poster.png">         <source src="videos/video1.mp4" type="video/mp4" />         <source src="videos/video1.webm" type="video/webm" />         <source src="videos/video1.ogv" type="video/ogg" />     </video>

El CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

body {     margin: 0;     padding: 0; } .puntos_bg {     background: url(images/x.png);     padding: 5px; } .barra-superior {     margin: 0 auto;     width: 95%;     max-width: 960px; } p.texto-titulo {     font-family: 'Raleway', sans-serif;     font-size: 2.5em;     border-top: 2px solid #fff;     border-bottom: 2px solid #fff;     text-align: center;     padding: 10px 0;     color: rgb(161, 244, 255);     text-shadow: 0 1px 7px rgba(0,0,0,.7); } #logo {     width: 320px;     height: 320px;     margin: 40px auto;     background: url(images/logo.png) no-repeat rgba(20, 118, 143, .5) 50%;     border-radius: 50%;     border: 15px solid rgba(255, 255, 255, .2);     padding: 13px;     text-indent: -99999px; } #video1 {     position: fixed;     left: 0;     top: 0;     min-height: 100%;     min-width: 100%;     width: auto;     height: auto;     z-index: -10;     visibility: visible; }

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información