mike/oc-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero: reinstate the ambient loop as a split layout, done right

Browse Source 
Bring back the reference's hero ambient — text left, looping WebM right — but
fixed: self-hosted (62KB, off Manus's S3), poster-first with a paper-tinted
container so it's NEVER blank, and loaded via JS only when appropriate (skipped
on Save-Data and prefers-reduced-motion; poster stays if autoplay is blocked).
No autoplay attribute = no surprise download. Poster image added next.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-22 18:32:07 -07:00
parent 1c642e517d
commit 2da2797b2c
3 changed files with 30 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+21 -2
View File
@@ -77,7 +77,7 @@
<main id="top">
<section class="hero" data-bg="light">
<div class="wrap"><div class="hero-col">
<div class="wrap hero-wrap"><div class="hero-col">
<p class="eyebrow">The human side of change · for Canadian manufacturers</p>
<h1>The systems are the <em>easy part.</em></h1>
<p class="lead">Getting your people to trust the change, share what they know, and lead through it — that's what decides whether any of it sticks. That's our work.</p>
@@ -86,7 +86,11 @@
<a class="btn link" href="#work">See how we work</a>
</div>
<p class="call">or call <a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="#contact">778&#8209;985&#8209;OPEN (6736)</a></p>
</div></div>
</div>
<div class="hero-media" aria-hidden="true">
<video class="hero-video" muted loop playsinline preload="none" poster="assets/media/hero-loop-poster.webp" data-src="assets/media/hero-loop.webm"></video>
</div>
</div>
</section>
<section class="band dark statement" data-bg="dark" id="problem">
@@ -359,6 +363,21 @@
Cal("init", { origin: "https://cal.shopwisdom.ca" });
</script>
<!-- Hero ambient loop: poster-first. Loads the video only when appropriate (skipped on Save-Data / reduced-motion); poster or paper bg shows if autoplay is blocked. -->
<script>
(function () {
var hv = document.querySelector('.hero-video');
if (!hv) return;
var conn = navigator.connection || {};
if (conn.saveData === true) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
var src = hv.getAttribute('data-src'); if (!src) return;
var s = document.createElement('source'); s.src = src; s.type = 'video/webm';
hv.appendChild(s); hv.load();
var p = hv.play(); if (p && p.catch) p.catch(function () {});
})();
</script>
<div class="float-cta">
<a class="btn" href="https://cal.shopwisdom.ca/michaelvictory/20min-opencommunications-meeting" data-cal-link="michaelvictory/20min-opencommunications-meeting" data-cal-origin="https://cal.shopwisdom.ca" data-cal-config='{"theme":"light"}'>Book a conversation</a>
</div>