Why can't I view videos on certain browsers?

Shopify Discussion

Topic summary

Cross-browser video playback issues on Shopify sites, especially Chrome not showing or autoplaying videos while Safari does.

Key diagnoses and fixes:

  • Incorrect markup: Videos were embedded in img tags. Recommendation: use the HTML5
  • Format/codec incompatibility: Chrome autoplay issue resolved by converting the video to MP4.
  • Mobile layering bug: Video overlapping the menu fixed with CSS z-index (stacking order) adjustments: set .videoBox { z-index: 1; } and a high z-index for #menu-drawer in component-list-menu.css.

Outcomes:

  • For rtacanarias.com, switching to MP4 and applying the z-index CSS solved both issues (confirmed by the user).
  • Original site (hirbawigcc.com) likely needs proper
  • Additional reports: videos intermittently blocking on bloum-digital.com, and videos not showing on Safari for pararidefold.com; no fixes posted yet.

Notes:

  • A screenshot illustrating the markup issue and a CSS code snippet are central to understanding the solutions.
  • Discussion remains open with pending confirmations and new requests.
Summarized with AI on January 30. AI used: gpt-5.
8

Hello @MarcosJavi
Seems it’s the video decode/format issue. Try to use use mp4 video or contact me if you want me to fix it.

1 Like