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
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; }