Texto con video de fondo

codi.link Copiar

<section class="container">
  <video src="./videos/video.mp4" autoplay loop muted></video>
  <h1 class="title">Hola Mundo</h1>
</section>      

<style>

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

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

.title {
  width: 100%;
  height: 100%;
  font-size: 150px;
  color: white;
  background-color: black;
  mix-blend-mode: multiply;

/*este efecto solo funciona con cierta combinacion de colores, 
  si estas usando fondo blanco, usa esto en su lugar.
*/
/*
color: black;
background-color: white;
mix-blend-mode: screen;

*/

}

</style>