VideoHero video

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

<section class="vh__section"> <div class="vh__header"> <p class="vh__eyebrow">Wie zijn wij?</p> <h1 class="vh__headline">Zie hoe wij <em>resultaten</em> leveren</h1> <p class="vh__sub">In 2 minuten leggen we uit hoe onze aanpak werkt, en waarom het werkt.</p> </div> <div class="vh__frame-wrap"> <div class="vh__frame"> <!-- Thumbnail layer --> <div class="vh__thumbnail" data-thumbnail> <img data-allow-img src="/img/ext/photo-1460925895917-afdab827c52f-w1600-e60653.jpg" alt="Video thumbnail" class="vh__thumb-img" loading="lazy" decoding="async"> <button class="vh__play-btn" aria-label="Video afspelen"> <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"> <polygon points="5,3 19,12 5,21"></polygon> </svg> </button> </div> <!-- Video layer (hidden until play) --> <div class="vh__video-layer" data-video-layer hidden> <iframe class="vh__iframe" data-src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&rel=0" src="" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Zie hoe wij <em>resultaten</em> leveren" frameborder="0"></iframe> </div>  </div> </div> <div class="vh__cta-wrap"> <a href="#" class="vh__cta">Gratis gesprek plannen</a> </div> </section>

<style>
.vh__section{padding:4rem 1.5rem;background:var(--color-bg)}
.vh__header{text-align:center;max-width:720px;margin:0 auto 2.5rem}
.vh__eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);margin:0 0 .75rem}
.vh__headline{font-size:clamp(2rem,5vw,3.25rem);font-weight:700;color:var(--color-primary);margin:0 0 1rem;line-height:1.1}
.vh__headline em{font-style:normal;color:var(--color-accent)}
.vh__sub{font-size:1.0625rem;color:var(--color-muted);margin:0;line-height:1.6}
.vh__frame-wrap{max-width:960px;margin:0 auto;border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 60px #0000001f}
.vh__frame{position:relative;aspect-ratio:16 / 9;background: #0a0a0a;overflow:hidden;border-radius:var(--radius)}
.vh__thumbnail{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vh__thumb-img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .3s ease}
.vh__thumbnail:hover .vh__thumb-img{filter:brightness(.85)}
.vh__play-btn{position:absolute;width:80px;height:80px;border-radius:50%;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-primary);box-shadow:0 8px 32px #00000040;transition:transform .2s ease,box-shadow .2s ease;padding-left:4px}
.vh__play-btn:hover{transform:scale(1.08);box-shadow:0 12px 40px #0000004d}
.vh__video-layer{position:absolute;inset:0}
.vh__iframe,.vh__video{width:100%;height:100%;border:none;display:block}
.vh__cta-wrap{text-align:center;margin-top:2rem}
.vh__cta{display:inline-block;padding:.75rem 2rem;background:var(--color-accent);color:#fff;text-decoration:none;border-radius:var(--radius);font-weight:600;font-size:.9375rem;transition:opacity .2s ease,transform .2s ease}
.vh__cta:hover{opacity:.88;transform:translateY(-1px)}
</style>