Vídeo background en HTML

Estoy empezando a meter en la formación, etiquetas de HTML5 y propiedades de CCS3. En este ejemplo, trabajamos la etiqueta <video> y propiedades de CSS3, como object-fit, object-position y mix-blend-mode.

El ejemplo muestra un vídeo de fondo de la página web totalmente responsivo, en autoplay y en loop. El vídeo que uso es libre, hay muchos recursos para descargar loops de vídeos libres y gratuitos, este en concreto lo he bajado de https://pixabay.com/es/videos/ejecutar-marat%C3%B3n-zurich-raza-15748/ y la fuente del título “STORMRUN” la he bajado de https://www.dafont.com/speedwagon.font y la he cargado en la página web mediante @font-face

Este sería el código:

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <title></title>
      
      <style>

@font-face {
   font-family:speed;
   src: url(fuentes/speedwagonsuperital.ttf);
}

*{
   margin: 0;
   padding: 0;
}

video { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

header {
  width: 100%;
  text-align: center;
  color: white;
  position: fixed;
}

header:hover {
  background: rgba(255,255,255,0.8);
  color: #000;
}

h1 {
  padding-top: 20px;
  padding-bottom: 20px;
  font-family:speed;
  text-align: center;
  font-size: 2.6rem;
  width: 100%;
  letter-spacing: .5rem;
}

nav a {
   text-decoration: none;
   padding: 1rem;
   color: inherit;
   font-size: 1.2rem;
}

#lema {
   min-height: 100px;
   text-align: center;
   position: relative;
   top:200px;
}

h2 { 
  font-family: Georgia, serif;
  font-size: 3rem;
  text-align: center;
  mix-blend-mode: overlay;
  color: #fff;
}

     </style>
 </head>
 <body>
   <video autoplay muted loop>
       <source src="Run.mp4" type="video/mp4">
   </video>
   <header>
      <h1>STORMRUN</h1>
      <nav>
          <a href="#">Marathon</a>
          <a href="#">Ironman</a>
          <a href="#">Clasica</a>
          <a href="#">Contacto</a>
      </nav>
   </header>
   <div id="lema">
      <h2>Encuentra tu reto, corre y consigue tu objetivo</h2>
   </div>
 </body>
</html>

Vídeo background en HTML

Vídeo background en HTML

Un comentario sobre “Vídeo background en HTML”

Deja una respuesta Cancelar la respuesta