Video Gallery

<section class="sl-video-gallery" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;">
    <header style="text-align:center;margin:0 0 1.5rem;">
      <h2 style="margin:0;font-size:clamp(1.5rem,3vw,2rem);">{{ section.settings.heading }}</h2>
      {%- if section.settings.subheading != blank -%}
        <p style="margin:.5rem 0 0;opacity:.8;">{{ section.settings.subheading }}</p>
      {%- endif -%}
    </header>
    <div style="display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));">
      {%- for block in section.blocks -%}
        {%- assign sl_vg_thumb = block.settings.thumbnail | image_url: width: 640 | default: 'https://picsum.photos/seed/' | append: block.id | append: '/640/360' -%}
        {%- assign sl_vg_url = block.settings.video_url | default: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' -%}
        <figure style="margin:0;display:flex;flex-direction:column;gap:.5rem;" {{ block.shopify_attributes }}>
          <a href="{{ sl_vg_url }}" target="_blank" rel="noopener" style="position:relative;display:block;aspect-ratio:16/9;border-radius:.5rem;overflow:hidden;background:#000;">
            <img src="{{ sl_vg_thumb }}" alt="{{ block.settings.alt | default: block.settings.title | default: 'Video thumbnail' }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;" />
            <span aria-hidden="true" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;">
              <span style="width:54px;height:54px;border-radius:50%;background:var(--sl-accent,#0a5cff);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;">&#9654;</span>
            </span>
            {%- if block.settings.duration != blank -%}
              <span style="position:absolute;right:.5rem;bottom:.5rem;padding:.15rem .45rem;background:rgba(0,0,0,.75);color:#fff;font-size:.75rem;border-radius:.2rem;">{{ block.settings.duration }}</span>
            {%- endif -%}
          </a>
          <figcaption style="display:flex;flex-direction:column;gap:.2rem;">
            <h3 style="margin:0;font-size:1rem;line-height:1.3;">{{ block.settings.title | default: 'Behind the scenes' }}</h3>
            {%- if block.settings.description != blank -%}
              <p style="margin:0;font-size:.85rem;opacity:.75;">{{ block.settings.description }}</p>
            {%- endif -%}
          </figcaption>
          <script type="application/ld+json">{"@context":"https://schema.org","@type":"VideoObject","name":{{ block.settings.title | default: 'Behind the scenes' | json }},"description":{{ block.settings.description | default: block.settings.title | default: 'Behind the scenes' | json }},"thumbnailUrl":{{ sl_vg_thumb | json }},"uploadDate":{{ block.settings.upload_date | default: '2025-01-01' | json }},"contentUrl":{{ sl_vg_url | json }}}</script>
        </figure>
      {%- endfor -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Video Gallery",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Video library" },
    { "type": "text", "id": "subheading", "label": "Subheading", "default": "Watch our latest drops and behind-the-scenes." }
  ],
  "blocks": [
    {
      "type": "video",
      "name": "Video",
      "settings": [
        { "type": "image_picker", "id": "thumbnail", "label": "Thumbnail" },
        { "type": "text", "id": "alt", "label": "Alt text", "default": "Video thumbnail" },
        { "type": "text", "id": "title", "label": "Title", "default": "Behind the scenes" },
        { "type": "text", "id": "description", "label": "Description", "default": "A short teaser." },
        { "type": "text", "id": "duration", "label": "Duration", "default": "2:14" },
        { "type": "url", "id": "video_url", "label": "Video URL" },
        { "type": "text", "id": "upload_date", "label": "Upload date (YYYY-MM-DD)", "default": "2025-01-01" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Video Gallery",
      "blocks": [
        { "type": "video" },
        { "type": "video" },
        { "type": "video" },
        { "type": "video" }
      ]
    }
  ]
}
{% endschema %}