 <style>
    /* Responsive container using aspect-ratio (falls back below) */
    .video-wrap {
      position: relative;
      width: 100%;
      max-width: 1100px;    /* tweak for your layout */
      margin: 24px auto;
      aspect-ratio: 16 / 9;
      background: #000;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,.15);
    }
    /* Fallback for older browsers without aspect-ratio */
    @supports not (aspect-ratio: 16 / 9) {
      .video-wrap::before {
        content: "";
        display: block;
        padding-top: 56.25%; /* 16:9 */
      }
      .video-wrap > * {
        position: absolute;
        inset: 0;
      }
    }

    .video-wrap video,
    .video-wrap iframe {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background: #000;
    }

    /* Big play overlay (clickable) */
    .play-overlay {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      pointer-events: none; /* enabled only before play via JS */
      transition: opacity .2s ease;
    }
    .play-overlay .btn {
      pointer-events: auto;
      width: 84px; height: 84px;
      border-radius: 50%;
      background: rgba(255,255,255,.9);
      display: grid; place-items: center;
      border: none; cursor: pointer;
      box-shadow: 0 6px 20px rgba(0,0,0,.25);
    }
    .play-overlay svg { width: 34px; height: 34px; }

    .video-wrap.is-playing .play-overlay { opacity: 0; visibility: hidden; }
    figure { margin: 0; }
    figcaption { font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#444; max-width:1100px; margin:8px auto 0; padding:0 8px; }
  </style>