src/components/video/VideoThumbnail.astro
---
// VideoThumbnail, recovered from blurr-components.pages.dev
---
<a class="vtn" href="#" aria-label="Bekijk video: Hoe BLURR jouw merk laat groeien" style="--vtn-ratio: 16/9"> <div class="vtn__media"> <div class="vtn__placeholder" aria-label="Video thumbnail"></div> <div class="vtn__play" aria-hidden="true"> <svg width="40" height="40" viewBox="0 0 40 40" fill="none"> <circle cx="20" cy="20" r="20" fill="rgba(99,102,241,0.9)"></circle> <polygon points="16,12 32,20 16,28" fill="white"></polygon> </svg> </div> <span class="vtn__duration">3:42</span> </div> <p class="vtn__title">Hoe BLURR jouw merk laat groeien</p> </a>
<style>
.vtn{display:block;text-decoration:none}
.vtn__media{position:relative;aspect-ratio:var(--vtn-ratio, 16/9);border-radius:10px;overflow:hidden;background:#111}
.vtn__poster{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.vtn:hover .vtn__poster{transform:scale(1.04)}
.vtn__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#1a1a2e,#2a2a4e)}
.vtn__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s}
.vtn:hover .vtn__play{opacity:.9}
.vtn__duration{position:absolute;bottom:.5rem;right:.6rem;background:#0a0a0abf;color:#fff;font-size:.75rem;font-weight:700;padding:.2rem .5rem;border-radius:4px}
.vtn__title{font-size:.95rem;font-weight:600;color:var(--color-primary, #0a0a0a);margin:.75rem 0 0;line-height:1.4}
</style>