VideoStats video

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

<div class="vst"> <div class="vst__player"> <div class="vst__placeholder" aria-label="Resultaten na 6 maanden BLURR"> <svg width="44" height="44" viewBox="0 0 44 44"> <circle cx="22" cy="22" r="22" fill="rgba(99,102,241,0.85)"></circle> <polygon points="17,11 37,22 17,33" fill="#fff"></polygon> </svg> </div> <span class="vst__badge">Live statistieken</span> </div> <div class="vst__stats"> <div class="vst__stat"> <span class="vst__stat-icon" aria-hidden="true"></span> <span class="vst__stat-value">24K</span> <span class="vst__stat-label">Views</span> </div><div class="vst__stat"> <span class="vst__stat-icon" aria-hidden="true"></span> <span class="vst__stat-value">1.2K</span> <span class="vst__stat-label">Abonnees</span> </div><div class="vst__stat"> <span class="vst__stat-icon" aria-hidden="true">→</span> <span class="vst__stat-value">8.4%</span> <span class="vst__stat-label">Engagement</span> </div><div class="vst__stat"> <span class="vst__stat-icon" aria-hidden="true">⏱</span> <span class="vst__stat-value">4:32</span> <span class="vst__stat-label">Gem. kijktijd</span> </div> </div> <p class="vst__title">Resultaten na 6 maanden BLURR</p> </div>

<style>
.vst{border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff}
.vst__player{position:relative;aspect-ratio:16/9}
.vst__poster{width:100%;height:100%;object-fit:cover}
.vst__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#0a0a1a,#1a1a3a);display:flex;align-items:center;justify-content:center;cursor:pointer}
.vst__badge{position:absolute;top:.75rem;left:.75rem;background:#000000b3;color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.06em;padding:.2rem .5rem;border-radius:20px}
.vst__stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #eee}
.vst__stat{display:flex;flex-direction:column;align-items:center;padding:1rem .5rem;gap:.2rem;border-right:1px solid #eee}
.vst__stat:last-child{border-right:none}
.vst__stat-icon{font-size:1rem}
.vst__stat-value{font-size:1.25rem;font-weight:800;color:var(--color-primary, #0a0a0a);line-height:1}
.vst__stat-label{font-size:.7rem;color:#999;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.vst__title{padding:.75rem 1rem;font-size:.9rem;font-weight:600;color:var(--color-primary, #0a0a0a);margin:0;border-top:1px solid #eee}
.vst__stats{grid-template-columns:repeat(2,1fr)}
.vst__stat:nth-child(2){border-right:none}
</style>