Video Block

{%- comment -%}
  modblo. Video Block (lazy-loaded)
  Paste into a Shopify "Custom Liquid" section via Theme Editor.
  Works with YouTube and Vimeo embed URLs.
{%- endcomment -%}

<style>
  .modblo-vid { background:#fff; color:#0b0b0c; padding:clamp(48px,7vw,96px) 0; }    /* EDIT colors */
  .modblo-vid__inner { max-width:960px; margin:0 auto; padding:0 24px; text-align:center; }
  .modblo-vid__h { font-size:clamp(24px,3vw,36px); letter-spacing:-.02em; margin:0 0 24px; }
  .modblo-vid__frame {
    position:relative; aspect-ratio:16/9; border-radius:18px;
    overflow:hidden; cursor:pointer;
    background:linear-gradient(135deg,#1e293b,#475569);                  /* EDIT poster: replace with <img> */
    box-shadow:0 16px 40px -12px rgba(0,0,0,.18);
  }
  .modblo-vid__poster { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .modblo-vid__frame:hover .modblo-vid__poster { transform:scale(1.02); }
  .modblo-vid__play {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:76px; height:76px; border-radius:50%;
    background:rgba(255,255,255,.96); color:#0b0b0c;
    border:0; cursor:pointer;
    display:grid; place-items:center;
    transition:transform .15s, background .2s;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
  }
  .modblo-vid__play:hover { transform:translate(-50%,-50%) scale(1.06); }
  .modblo-vid__play svg { margin-left:4px; }
  .modblo-vid__caption { font-size:14px; opacity:.65; margin:16px 0 0; }
</style>

<section class="modblo-vid">
  <div class="modblo-vid__inner">
    <h2 class="modblo-vid__h">Watch the film.</h2>                          {%- comment -%} EDIT heading {%- endcomment -%}

    {%- comment -%}
      EDIT video URL: replace data-src with your YouTube/Vimeo embed URL.
      Examples:
        https://www.youtube.com/embed/dQw4w9WgXcQ
        https://player.vimeo.com/video/123456789
    {%- endcomment -%}
    <div class="modblo-vid__frame" data-modblo-vid data-src="https://www.youtube.com/embed/dQw4w9WgXcQ">
      {%- comment -%} EDIT poster image: replace this gradient with <img class="modblo-vid__poster" src="..."> {%- endcomment -%}
      <button type="button" class="modblo-vid__play" aria-label="Play video">
        <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" aria-hidden="true">
          <polygon points="6 4 20 12 6 20 6 4"/>
        </svg>
      </button>
    </div>

    <p class="modblo-vid__caption">A 90-second look behind the scenes.</p>  {%- comment -%} EDIT caption {%- endcomment -%}
  </div>
</section>

<script>
  document.querySelectorAll('[data-modblo-vid]').forEach(function (frame) {
    var src = frame.dataset.src;
    if (!src) return;
    frame.addEventListener('click', function () {
      var v = document.createElement('iframe');
      v.src = src + (src.indexOf('?') > -1 ? '&' : '?') + 'autoplay=1';
      v.allow = 'autoplay; encrypted-media; picture-in-picture';
      v.allowFullscreen = true;
      v.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border:0;';
      frame.innerHTML = '';
      frame.appendChild(v);
    }, { once: true });
  });
</script>