Cómo crear un background estático de vídeo HTML5 mediante CSS

Cómo crear un background estático de vídeo HTML5 mediante CSS

En este tutorial te mostraremos cómo añadir un background estático de vídeo HTML5 utilizando CSS. Es un script muy simple y muy sencillo ideal para landing pages. En este tutorial utilizaremos el tag <video> de HTML5 para embeber un vídeo y CSS para poner el vídeo de fondo.
Lo primero es embeber el vídeo mediante HTML5 en tu página:
<video id="my-video" class="video" autoplay muted loop>
   <source src="videos/video.mp4" type="video/mp4">
</video>
Como puedes ver en el script de arriba, hemos agregado el vídeo con las propiedades mute, autoplay y loop. Con esto haremos que cuando se reproduzca el vídeo en el fondo de la web, lo haga sin sonido, se reproduzca sin tener que pulsar el botón de play y que lo haga en bucle. Ideal para un vídeo de fondo.
Este es el CSS que utilizaremos para que nuestro vídeo de fondo funcione:
div, h1, p, a, video, h2{
    z-index: 2;
    position: relative;
}
.content {
  position: relative;
  top: 30%;
  z-index: 2;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}
.content__heading {
  margin-bottom: 24px;
  color: rgb(39,39,39);
  font-size: 44px;
}
.content__teaser {
  margin-bottom: 24px;
  color: rgb(89,89,89);
  font-size: 22px;
}
.content__cta {
  display: inline-block;
  margin: 0;
  padding: 12px 48px;
  color: rgb(255,60,100);
  font-size: 22px;
  text-decoration: none;
  border: solid 4px rgb(255,60,100);
}
.video {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

Acerca de: Programator

Somos Instinto Programador

0 comentarios:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Con tecnología de Blogger.