Adjunto imagen de lo que quiero lograr, por si acaso el título es confuso :)
- Video de fondo
- Div con backdrop-filter
- Texto dentro del div, el cual permita ver el video de fondo <- Lo complicado
Paso el código de lo que tengo hasta ahora. Es muy poco eficiente reproducir dos veces el videos además, en mi pc, no están sincronizados al volver a empezar. Por estos motivos no es una solución viable. ¿Cómo podría obtener este efecto?
.home {
grid-area: home;
overflow: hidden;
position: relative;
}
.home video {
position: absolute;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
z-index: -1;
object-fit: cover;
}
.home .content {
display: grid;
grid-template-areas: 'name empty';
}
.home .content .name {
grid-area: name;
width: 50vw;
height: 100vh;
backdrop-filter: blur(15px);
}
.clipped-video {
-webkit-clip-path: url(#text-overlay);
clip-path: url(#text-overlay);
}
text {
font-size: 18rem;
}
.home .content .empty {
grid-area: empty;
width: 50vw;
height: 100vh;
}
<section class="home" id="home">
<video autoplay loop muted playsinline src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm"></video>
<div class="content">
<div class="name">
<div class="wrapper">
<video class="clipped-video" muted loop autoplay autoplay loop muted playsinline src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm"></video>
<svg>
<clipPath id="text-overlay">
<text x="50%" y="50%" dominant-baseline="middle" dy="1.58em">NAM</text>
</clipPath>
</svg>
</div>
</div>
<div class="empty"></div>
</div>
</section>