VideoEmbed video

---
/**
 * VideoEmbed — heading + responsive 16:9 video-embed (YouTube/Vimeo iframe).
 *
 * Props:
 * - eyebrow?: string
 * - headline?: string
 * - sub?: string
 * - embedSrc?: string             (iframe src)
 * - title?: string               (iframe title, toegankelijkheid)
 */
interface Props {
  eyebrow?: string;
  headline?: string;
  sub?: string;
  embedSrc?: string;
  title?: string;
}
const {
  eyebrow,
  headline,
  sub,
  embedSrc = 'https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0',
  title = 'Video',
} = Astro.props;
---

<section class="bl-section ve">
  <div class="bl-inner ve__inner">
    {(eyebrow || headline || sub) && (
      <div class="ve__header">
        {eyebrow && <p class="ve__eyebrow">{eyebrow}</p>}
        {headline && <h2 class="ve__headline">{headline}</h2>}
        {sub && <p class="ve__sub">{sub}</p>}
      </div>
    )}
    <div class="ve__embed-wrap">
      <iframe
        class="ve__iframe"
        src={embedSrc}
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
        loading="lazy"
        title={title}
        frameborder="0"
      ></iframe>
    </div>
  </div>
</section>

<style>
.ve{background:var(--color-bg)}
.ve__header{margin-bottom:2rem}
.ve__eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);margin:0 0 .5rem}
.ve__headline{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;color:var(--color-primary);margin:0 0 .75rem;line-height:1.2}
.ve__sub{font-size:1rem;color:var(--color-muted);margin:0;line-height:1.6}
.ve__embed-wrap{position:relative;aspect-ratio:16 / 9;border-radius:var(--radius);overflow:hidden;background:#0a0a0a;box-shadow:0 8px 30px #0000001a}
.ve__iframe{position:absolute;inset:0;width:100%;height:100%;border:none;display:block}
</style>