Vertical Video Carousel

<section class="sl-vvc" style="padding:clamp(32px,5vw,56px) 0;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;padding:0 1rem;">
    <header style="text-align:center;margin:0 0 1.25rem;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 style="margin:.25rem 0 0;font-size:clamp(1.5rem,3vw,2rem);">{{ section.settings.heading }}</h2>
    </header>
  </div>
  <style>
    .sl-vvc-rail { scrollbar-width: thin; }
    .sl-vvc-card { transform: scale(.9); transition: transform .3s ease; }
    .sl-vvc-card:hover, .sl-vvc-card:focus-within { transform: scale(1); }
  </style>
  <div class="sl-vvc-rail" style="display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem clamp(1rem,6vw,4rem);scroll-padding:2rem;">
    {%- for block in section.blocks -%}
      {%- assign sl_vvc_poster = block.settings.poster | image_url: width: 560 | default: 'https://picsum.photos/seed/' | append: block.id | append: '/560/996' -%}
      {%- assign sl_vvc_src = block.settings.video_url | default: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' -%}
      <figure class="sl-vvc-card" style="flex:0 0 clamp(220px,55vw,280px);scroll-snap-align:center;margin:0;position:relative;aspect-ratio:9/16;border-radius:1rem;overflow:hidden;background:#000;" {{ block.shopify_attributes }}>
        <video controls playsinline preload="metadata" muted loop poster="{{ sl_vvc_poster }}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">
          <source src="{{ sl_vvc_src }}" type="video/mp4" />
          <img src="{{ sl_vvc_poster }}" alt="{{ block.settings.alt | default: block.settings.caption | default: 'Video poster' }}" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;" />
        </video>
        <figcaption style="position:absolute;left:0;right:0;bottom:0;padding:1rem;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);color:#fff;font-size:.85rem;">
          {%- if block.settings.handle != blank -%}<strong style="display:block;margin-bottom:.15rem;">{{ block.settings.handle }}</strong>{%- endif -%}
          <span>{{ block.settings.caption }}</span>
        </figcaption>
        <script type="application/ld+json">{"@context":"https://schema.org","@type":"VideoObject","name":{{ block.settings.caption | default: block.settings.handle | default: 'Video' | json }},"description":{{ block.settings.caption | default: 'Customer video' | json }},"thumbnailUrl":{{ sl_vvc_poster | json }},"uploadDate":{{ block.settings.upload_date | default: '2025-01-01' | json }},"contentUrl":{{ sl_vvc_src | json }}}</script>
      </figure>
    {%- endfor -%}
  </div>
</section>
{% schema %}
{
  "name": "Vertical Video Carousel",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "As seen on TikTok" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Watch, shop, share" }
  ],
  "blocks": [
    {
      "type": "clip",
      "name": "Clip",
      "settings": [
        { "type": "url", "id": "video_url", "label": "Video URL (.mp4)" },
        { "type": "image_picker", "id": "poster", "label": "Poster image" },
        { "type": "text", "id": "alt", "label": "Alt text", "default": "Video poster" },
        { "type": "text", "id": "handle", "label": "Handle", "default": "@customer" },
        { "type": "text", "id": "caption", "label": "Caption", "default": "Obsessed with this." },
        { "type": "text", "id": "upload_date", "label": "Upload date (YYYY-MM-DD)", "default": "2025-01-01" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Vertical Video Carousel",
      "blocks": [
        { "type": "clip" }, { "type": "clip" }, { "type": "clip" },
        { "type": "clip" }, { "type": "clip" }
      ]
    }
  ]
}
{% endschema %}