Poner un video en modo background en una Página Web con HTML5 y CSS

Poner un video en modo background en una Página Web con HTML5 y CSS

Poner un vídeo como fondo(background) de una página web con HTML5 usando CSS. HTML5 se ha vuelto algo natural para los navegadores modernos y es importante aprovechar todas las ventajas que nos ofrecen hoy en día.

¿Como poner un video en modo background en una pagina web?

En este tutorial hemos utilizado la etiqueta  

Ahora solo debemos añadir el siguiente fragmento de código en la página o documento donde quieren que un vídeo se convierta como fondo de una pagina web.

<video id="my-video" class="video" autoplay muted loop>
   <source src="videos/video.mp4" type="video/mp4">
</video>

Si ya tienes una documento CSS o estas por crearla. Dentro del archivos .CSS coloca el siguiente linea de código.

 

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%);
}

Después de hacer lo siguiente, podrá ver los cambios realizados.

La propiedades del reproductor de video HTML5 tiene los siguiente. autoplay muted loop

Abimael Gutierrez P.

Abimael Gutierrez P.
Fundador de apdesc