Video Hero Banner

<section class="sl-video-hero" style="position:relative;min-height:clamp(320px,60vw,560px);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;font-family:inherit;text-align:center;">
  {%- assign sl_video_src = section.settings.video_url | default: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' -%}
  {%- assign sl_poster_src = section.settings.poster | image_url: width: 1600 | default: 'https://picsum.photos/seed/video-hero/1600/900' -%}
  <video autoplay muted loop playsinline poster="{{ sl_poster_src }}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;">
    <source src="{{ sl_video_src }}" type="video/mp4" />
    <img src="{{ sl_poster_src }}" alt="{{ section.settings.poster_alt | default: 'Video poster' }}" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;" />
  </video>
  <div aria-hidden="true" style="position:absolute;inset:0;background:rgba(0,0,0,{{ section.settings.overlay_opacity | default: 0.4 }});z-index:1;"></div>
  <div style="position:relative;z-index:2;max-width:760px;padding:clamp(32px,6vw,64px) 1rem;display:flex;flex-direction:column;gap:.85rem;align-items:center;">
    {%- if section.settings.eyebrow != blank -%}
      <span style="display:inline-block;padding:.25rem .6rem;background:var(--sl-accent,#0a5cff);color:#fff;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;border-radius:.25rem;">{{ section.settings.eyebrow }}</span>
    {%- endif -%}
    <h2 style="margin:0;font-size:clamp(1.75rem,4vw,3rem);line-height:1.15;">{{ section.settings.heading }}</h2>
    {%- if section.settings.subheading != blank -%}
      <p style="margin:0;font-size:clamp(1rem,1.75vw,1.2rem);opacity:.95;">{{ section.settings.subheading }}</p>
    {%- endif -%}
    {%- if section.settings.cta_text != blank -%}
      <a href="{{ section.settings.cta_link | default: '#' }}" style="display:inline-block;margin-top:.5rem;padding:.85rem 1.5rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:.375rem;text-decoration:none;font-weight:700;">{{ section.settings.cta_text }}</a>
    {%- endif -%}
  </div>
</section>
{% schema %}
{
  "name": "Video Hero Banner",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "New arrivals" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Move with confidence" },
    { "type": "text", "id": "subheading", "label": "Subheading", "default": "Crafted for every kind of day." },
    { "type": "text", "id": "cta_text", "label": "Button text", "default": "Shop the edit" },
    { "type": "url", "id": "cta_link", "label": "Button link" },
    { "type": "url", "id": "video_url", "label": "Video URL (.mp4)" },
    { "type": "image_picker", "id": "poster", "label": "Poster image (fallback)" },
    { "type": "text", "id": "poster_alt", "label": "Poster alt text", "default": "Video poster" },
    { "type": "range", "id": "overlay_opacity", "label": "Overlay opacity", "min": 0, "max": 0.8, "step": 0.05, "default": 0.4 }
  ],
  "presets": [{ "name": "Video Hero Banner" }]
}
{% endschema %}