Why can't I view videos on certain browsers?

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.

Hello @MarcosJavi
Please use the css on your CSS file (component-list-menu.css).

.videoBox {z-index: 1;}
#menu-drawer {z-index: 99999999;}

Please like my comments if you think you are satisfied. Thanks!

1 Like