Video Embed

<section class="sl-video-embed" style="padding:clamp(32px,5vw,56px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:1rem;">
    {%- if section.settings.heading != blank -%}
      <h2 style="margin:0;font-size:clamp(1.5rem,3vw,2rem);text-align:center;">{{ section.settings.heading }}</h2>
    {%- endif -%}
    <figure style="margin:0;border-radius:.75rem;overflow:hidden;background:#000;">
      <div style="position:relative;aspect-ratio:16/9;width:100%;">
        {%- assign sl_ve_src = section.settings.video_url | default: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' -%}
        {%- assign sl_ve_poster = section.settings.poster | image_url: width: 1280 | default: 'https://picsum.photos/seed/video-embed/1280/720' -%}
        {%- if sl_ve_src contains 'youtube' or sl_ve_src contains 'youtu.be' or sl_ve_src contains 'vimeo' -%}
          <iframe src="{{ sl_ve_src }}" title="{{ section.settings.video_title | default: section.settings.heading }}" loading="lazy" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen style="position:absolute;inset:0;width:100%;height:100%;border:0;"></iframe>
        {%- else -%}
          <video controls preload="metadata" poster="{{ sl_ve_poster }}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">
            <source src="{{ sl_ve_src }}" type="video/mp4" />
            <img src="{{ sl_ve_poster }}" alt="{{ section.settings.poster_alt | default: 'Video thumbnail' }}" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;" />
          </video>
        {%- endif -%}
      </div>
      {%- if section.settings.caption != blank -%}
        <figcaption style="margin:.75rem 0 0;font-size:.9rem;opacity:.8;text-align:center;">{{ section.settings.caption }}</figcaption>
      {%- endif -%}
    </figure>
  </div>
  {%- if section.settings.video_title != blank -%}
    <script type="application/ld+json">{"@context":"https://schema.org","@type":"VideoObject","name":{{ section.settings.video_title | json }},"description":{{ section.settings.caption | default: section.settings.video_title | json }},"thumbnailUrl":{{ sl_ve_poster | json }},"uploadDate":{{ section.settings.upload_date | default: '2025-01-01' | json }},"contentUrl":{{ sl_ve_src | json }}}</script>
  {%- endif -%}
</section>
{% schema %}
{
  "name": "Video Embed",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Watch the story" },
    { "type": "text", "id": "video_title", "label": "Video title (SEO)", "default": "Our brand story" },
    { "type": "url", "id": "video_url", "label": "Video URL (YouTube, Vimeo, or .mp4)" },
    { "type": "image_picker", "id": "poster", "label": "Poster image" },
    { "type": "text", "id": "poster_alt", "label": "Poster alt text", "default": "Video thumbnail" },
    { "type": "text", "id": "caption", "label": "Caption", "default": "Meet the makers behind the brand." },
    { "type": "text", "id": "upload_date", "label": "Upload date (YYYY-MM-DD)", "default": "2025-01-01" }
  ],
  "presets": [{ "name": "Video Embed" }]
}
{% endschema %}