Playbook · Shopify video hero not playing
The hero video stays on its poster or never starts.
Written for a Shopify DTC owner whose above-the-fold hero or banner video will not play on the live storefront. Hold one URL and one published theme constant: prove the media source, poster, muted state, autoplay policy, overlays, and breakpoint markup before changing code. This is distinct from a blank video section and from a lazy video that fails only after deferred loading. No earnings claims.
Nico at Latch AI Ops · Sep 16, 2026 · ~10 minute read
Buy the 72-hour install — $997Video section blank?Merchant FAQ
01
Name the hero failure before editing.
This page is for a video hero or banner above the fold: a video background, inline hero player, or banner media intended to start when the page loads. Separate the symptom: poster remains, the hero is blank, audio prevents start, only mobile fails, or the video starts and immediately pauses. A whole video section that renders empty belongs in the video-section-blank playbook. A video that appears only after scroll and fails while loading belongs in lazy-video-not-playing. This page is not either of those.
Record the exact live URL, hero section ID, video host or Shopify-hosted file, poster URL, device, browser, Market, consent state, theme name, and whether the failure is autoplay, inline controls, or source loading. One template failing points to section data; every page failing points to shared theme JavaScript, CSS, or an app.
02
Prove the published hero media and template, not only preview.
Open Online Store → Themes and inspect the published theme and exact template assigned to the live URL. Confirm the hero section exists, is enabled, appears above the fold, and has a playable source plus a valid poster. Draft-theme preview can contain media, settings, or app blocks that buyers never receive.
- Compare the published theme's source URL with the editor; check for a deleted, private, or unsupported file.
- Confirm the video element has the intended source, poster, width, height, and stable section ID at desktop and mobile.
- Check autoplay, muted, playsinline, loop, controls, preload, and per-Market or per-template visibility settings.
- Check that an overlay, cookie layer, announcement bar, or z-index change is not covering the hero or capturing the first pointer.
03
Trace playback and browser gates in that order.
Use a clean browser and inspect the live DOM and Network panel. Confirm the media request returns a usable status and content type, the source is not blocked by a CSP or hotlink rule, and the console has no theme or app exception. A browser may reject unmuted autoplay; test muted, inline playback without weakening a user's audio choice.
Check responsive markup for a desktop video paired with a mobile image, a hidden source, CSS display or visibility, and an overlay with pointer-events. Test consent-on and consent-off states, reduced motion, Safari iPhone, Chrome Android, desktop, keyboard focus, poster fallback, pause controls, and a second load. Do not “fix” this by forcing sound or hiding a failed video.
04
Repair the smallest live path, then retest the banner.
Correct only the confirmed source, setting, markup, or app conflict on the published template. Preserve a useful poster and readable headline if motion is blocked, include accessible controls when the hero is interactive, keep the video muted for autoplay, and respect reduced-motion preferences. If a third-party embed is the cause, use the provider's supported embed and fallback rather than an opaque script.
Retest first paint, poster, start, pause, loop, source requests, CLS, contrast, keyboard access, mobile crop, Market variations, consent states, and reduced motion. Verify the hero does not obscure navigation or CTA links. Publish the smallest change and save before/after evidence so a later theme update does not recreate the failure.
05
When to stay DIY vs pay $997.
Stay DIY if one hero needs one controlled template, media file, setting, or selector repair. Prove the live path, fix the smallest gate, publish, and retest. No agency is required and no conversion or revenue guarantee is implied.
Pay $997 one-time when the work is wiring the live Shopify stack you already use: lead capture, ops alerts, and a checkout-ready workflow. Nico at Latch AI Ops installs it on one live store in 72 hours after collaborator access is in. You are buying the install, not more orders or an earnings claim.