VideoEmbed2 video

---
/**
 * VideoEmbed2
 * Alternatieve embed met afgeronde hoeken, schaduw en onderschrift
 */
interface Props {
  src?: string;
  caption?: string;
  ratio?: '16/9' | '4/3' | '1/1';
}
const {
  src = 'https://www.youtube.com/embed/dQw4w9WgXcQ',
  caption = 'Hoe BLURR een e-commerce merk van 0 naar €1,2M omzet begeleidde.',
  ratio = '16/9',
} = Astro.props;
const paddingMap = { '16/9': '56.25%', '4/3': '75%', '1/1': '100%' };
const padding = paddingMap[ratio] ?? '56.25%';
---

<figure class="ve2">
  <div class="ve2__wrap" style={`padding-bottom: ${padding}`}>
    <iframe
      class="ve2__iframe"
      src={src}
      title="Ingesloten video"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
  </div>
  {caption && <figcaption class="ve2__caption">{caption}</figcaption>}
</figure>

<style>
  .ve2 {
    max-width: 860px;
    margin: 2.5rem auto;
    padding: 0 1.5rem;
  }
  .ve2__wrap {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.14);
  }
  .ve2__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }
  .ve2__caption {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    color: #888;
    text-align: center;
    line-height: 1.5;
    font-style: italic;
  }
</style>