Thank you for the help. You’re the DARK KNIGHT.
Topic summary
Goal: Autoplay short product videos as the secondary media on collection cards (on hover) and autoplay on the product page.
Core solution (Dawn v6):
- Place the product video as the second media item. Browsers block autoplay with sound, so videos must be muted.
- Update CSS (base.css, component-card.css) to treat video like the secondary image and reveal it on hover.
- In card-product.liquid, render the second media with video_tag (muted, loop, autoplay, no controls).
Key limitations/notes:
- No hover on mobile devices, so this effect won’t trigger on handhelds.
- Works on Dawn; other themes (Lorenza, Crave, Taste) may differ and need theme-specific adjustments. One user broke images on Taste; use the code editor’s “Recent changes” to revert and always duplicate your live theme before editing.
Latest update (Dawn 13):
- Updated Gist adds JS to play on mouseenter and pause on mouseleave, preventing background playback. Users can add video.currentTime = 0 on mouseleave to reset to start.
- Another tweak allows media in any order (images/videos not restricted to 2nd slot).
Open items:
- Product page autoplay: still inconsistent (works with thumbnail carousel, not with two-column layout). Thread remains partially unresolved.