VideoBackground video

---
// VideoBackground, recovered from blurr-components.pages.dev
---

<section class="vbg" style="--vbg-opacity: 0.55; --vbg-min: 500px"> <div class="vbg__placeholder" aria-hidden="true"></div> <div class="vbg__overlay"></div> <div class="vbg__content">  <h2 class="vbg__default-title">Jouw boodschap in beweging</h2> <p class="vbg__default-sub">Gebruik de slot om content toe te voegen boven de video.</p>  </div> </section>

<style>
.vbg{position:relative;min-height:var(--vbg-min, 500px);overflow:hidden;display:flex;align-items:center;justify-content:center}
.vbg__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vbg__placeholder{position:absolute;inset:0;background:linear-gradient(160deg,#0a0a1a,#1a1a4a)}
.vbg__overlay{position:absolute;inset:0;background:rgba(10,10,10,var(--vbg-opacity, .55))}
.vbg__content{position:relative;z-index:1;text-align:center;padding:4rem 2rem;max-width:800px}
.vbg__default-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin:0 0 1rem}
.vbg__default-sub{font-size:1.1rem;color:#ffffffbf;margin:0;line-height:1.6}
</style>