src/components/video/VideoAutoplay.astro
---
// VideoAutoplay, recovered from blurr-components.pages.dev
---
<section class="vap"> <div class="vap__video-wrap"> <video class="vap__video" src="https://www.w3schools.com/html/mov_bbb.mp4" autoplay muted loop playsinline aria-hidden="true"></video> <div class="vap__overlay"></div> </div> <div class="vap__content"> <h2 class="vap__headline">Jouw merk in beweging</h2> </div> </section>
<style>
.vap{position:relative;width:100%;min-height:520px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.vap__video-wrap{position:absolute;inset:0}
.vap__video{width:100%;height:100%;object-fit:cover;display:block}
.vap__overlay{position:absolute;inset:0;background:#0a0a0a8c}
.vap__content{position:relative;z-index:1;text-align:center;padding:2rem 1.5rem}
.vap__headline{font-size:clamp(1.75rem,4vw,3.5rem);font-weight:800;color:#fff;margin:0;line-height:1.15;letter-spacing:-.02em;text-shadow:0 2px 20px rgba(0,0,0,.4)}
</style>