VideoPip video

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

<section class="vpip"> <h2 class="vpip__title">Live demo &amp; presentatie</h2> <div class="vpip__wrapper vpip__wrapper--bottom-right"> <div class="vpip__main"> <div class="vpip__main-placeholder" aria-label="Hoofdvideo"> <span class="vpip__hint" aria-hidden="true">Hoofdvideo</span> </div> </div> <div class="vpip__pip"> <div class="vpip__pip-placeholder" aria-label="Picture in picture"> <span class="vpip__pip-hint" aria-hidden="true">PiP</span> </div> </div> </div> </section>

<style>
.vpip{padding:2rem 0}
.vpip__title{font-size:1.75rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 1.5rem}
.vpip__wrapper{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#111}
.vpip__main{width:100%;height:100%}
.vpip__main-img{width:100%;height:100%;object-fit:cover}
.vpip__main-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#0a0a1a,#1a1a3a);display:flex;align-items:center;justify-content:center;color:#ffffff40;font-size:.9rem}
.vpip__pip{position:absolute;width:28%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:3px solid #fff;box-shadow:0 8px 24px #0006}
.vpip__wrapper--bottom-right .vpip__pip{bottom:1.25rem;right:1.25rem}
.vpip__wrapper--bottom-left .vpip__pip{bottom:1.25rem;left:1.25rem}
.vpip__wrapper--top-right .vpip__pip{top:1.25rem;right:1.25rem}
.vpip__wrapper--top-left .vpip__pip{top:1.25rem;left:1.25rem}
.vpip__pip-img{width:100%;height:100%;object-fit:cover}
.vpip__pip-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#2a2a4a,#3a3a6a);display:flex;align-items:center;justify-content:center;color:#fff6;font-size:.75rem;font-weight:600}
</style>