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

Hero loop: drop poster, fade the video in on play

Browse Source 
Can't generate a frame poster (the loop is VP9; fine for real browsers but the
review tooling can't decode it), so rely on the paper-tinted panel as the
instant never-blank base and fade the video in on the 'playing' event. Cleaner
and removes a 404. VP9 confirmed — plays on all modern browsers + iOS 14.5+.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-22 18:34:57 -07:00
parent 2da2797b2c
commit 77f5cf493d
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -1
View File
@@ -88,7 +88,7 @@
<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 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>
<video class="hero-video" muted loop playsinline preload="none" data-src="assets/media/hero-loop.webm"></video>
</div>
</div>
</section>
@@ -374,6 +374,7 @@ Cal("init", { origin: "https://cal.shopwisdom.ca" });
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();
hv.addEventListener('playing', function () { hv.classList.add('is-playing'); }, { once: true });
var p = hv.play(); if (p && p.catch) p.catch(function () {});
})();
</script>
style.css
+2 -1
View File
@@ -130,7 +130,8 @@ a.tel { text-decoration: none; }
/* Hero split — text left, ambient loop right. Poster-first + paper fallback = never blank. */
.hero-wrap { display: grid; grid-template-columns: 1.05fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-media { position: relative; border-radius: 10px; overflow: hidden; background: var(--paper-2); aspect-ratio: 1 / 1; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .8s ease; }
.hero-video.is-playing { opacity: 1; }
@media (max-width: 860px) {
.hero-wrap { grid-template-columns: 1fr; gap: 2.2rem; }
.hero-media { aspect-ratio: 16 / 10; max-height: 320px; }