VideoPlaylist video

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

<section class="vpl"> <h2 class="vpl__heading">Videoserie: de BLURR methode</h2> <div class="vpl__layout"> <div class="vpl__main"> <div class="vpl__player"> <div class="vpl__active-placeholder" aria-label="Video 1"> <svg width="60" height="60" viewBox="0 0 60 60"> <circle cx="30" cy="30" r="30" fill="rgba(99,102,241,0.85)"></circle> <polygon points="24,16 50,30 24,44" fill="#fff"></polygon> </svg> </div> </div> <p class="vpl__active-title">Introductie BLURR methode</p> </div> <div class="vpl__sidebar"> <button class="vpl__item vpl__item--active" type="button"> <div class="vpl__thumb"> <div class="vpl__thumb-placeholder" aria-label="Video 1"></div> <span class="vpl__playing-dot" aria-hidden="true"></span> </div> <div class="vpl__item-info"> <p class="vpl__item-title">Introductie BLURR methode</p> <p class="vpl__item-duration">3:28</p> </div> </button><button class="vpl__item" type="button"> <div class="vpl__thumb"> <div class="vpl__thumb-placeholder" aria-label="Video 2"></div>  </div> <div class="vpl__item-info"> <p class="vpl__item-title">Stap 1: Strategie &amp; positionering</p> <p class="vpl__item-duration">8:14</p> </div> </button><button class="vpl__item" type="button"> <div class="vpl__thumb"> <div class="vpl__thumb-placeholder" aria-label="Video 3"></div>  </div> <div class="vpl__item-info"> <p class="vpl__item-title">Stap 2: Brand identity bouwen</p> <p class="vpl__item-duration">6:55</p> </div> </button> </div> </div> </section>

<style>
.vpl{padding:2rem 0}
.vpl__heading{font-size:1.75rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 2rem}
.vpl__layout{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;align-items:start}
.vpl__player{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#111}
.vpl__active-poster{width:100%;height:100%;object-fit:cover}
.vpl__active-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#0a0a1a,#1a1a3a);display:flex;align-items:center;justify-content:center}
.vpl__active-title{font-size:1rem;font-weight:600;color:var(--color-primary, #0a0a0a);margin:.75rem 0 0}
.vpl__sidebar{display:flex;flex-direction:column;gap:.5rem;max-height:400px;overflow-y:auto}
.vpl__item{display:flex;align-items:flex-start;gap:.75rem;padding:.6rem;border:none;background:transparent;border-radius:8px;cursor:pointer;text-align:left;transition:background .15s}
.vpl__item:hover{background:#f5f5f5}
.vpl__item--active{background:#eeeef8}
.vpl__thumb{position:relative;width:80px;aspect-ratio:16/9;border-radius:4px;overflow:hidden;flex-shrink:0}
.vpl__thumb-img{width:100%;height:100%;object-fit:cover}
.vpl__thumb-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#1a1a2e,#2a2a4e)}
.vpl__playing-dot{position:absolute;inset:0;background:#6366f180;display:flex;align-items:center;justify-content:center}
.vpl__playing-dot:after{content:"▶";color:#fff;font-size:.8rem}
.vpl__item-info{flex:1;min-width:0}
.vpl__item-title{font-size:.8rem;font-weight:600;color:var(--color-primary, #0a0a0a);margin:0 0 .2rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vpl__item-duration{font-size:.72rem;color:#999;margin:0;font-weight:500}
.vpl__layout{grid-template-columns:1fr}
.vpl__sidebar{max-height:none}
</style>