VideoBackground video

---
interface Props {
  src?: string;
  poster?: string;
  overlayOpacity?: number;
  minHeight?: string;
}

const {
  src = '',
  poster = '',
  overlayOpacity = 0.55,
  minHeight = '500px',
} = Astro.props;
---

<section class="vbg" style={`--vbg-opacity: ${overlayOpacity}; --vbg-min: ${minHeight}`}>
  {src ? (
    <video
      class="vbg__video"
      src={src}
      poster={poster || undefined}
      autoplay
      muted
      loop
      playsinline
      aria-hidden="true"
    ></video>
  ) : (
    <div class="vbg__placeholder" aria-hidden="true"></div>
  )}
  <div class="vbg__overlay"></div>
  <div class="vbg__content">
    <slot>
      <h2 class="vbg__default-title">Jouw boodschap in beweging</h2>
      <p class="vbg__default-sub">Gebruik de slot om content toe te voegen boven de video.</p>
    </slot>
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .vbg {
    position: relative;
    min-height: var(--vbg-min, 500px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .vbg__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .vbg__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #0a0a1a 0%, #1a1a4a 100%);
  }
  .vbg__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10, var(--vbg-opacity, 0.55));
  }
  .vbg__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 4rem 2rem;
    max-width: 800px;
  }
  .vbg__default-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 1rem;
  }
  .vbg__default-sub {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.75);
    margin: 0;
    line-height: 1.6;
  }
</style>