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

lunes 22 junio de 2015lunes 8 febrero de 2016 BlogUneWeb Integración Web

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

El HTML

El CSS

Comparte esto:

Entradas relacionadas