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>
No funciona no se ve nada.