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!
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.
1 Like