Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
It works great on desktop. On mobile and ipad it is just a flat static background color. Any help would be greatly appreciated.
Here is the code:
<script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');</script>
<script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'details-modal.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'password-modal.js' | asset_url }}" defer="defer"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
document.body.style.backgroundColor = 'transparent';
document.body.classList.add('mobile-device');
</script>
<style> @media screen and (max-width: 750px) {
body.mobile-device {background-color: transparent !important;
}
}
</style>
</head>
<body class="password gradient">
<div class="body-overlay">
{% section 'main-password-header' %}
{{ content_for_layout }}
<video class="fullscreen-video-wrap" playsinline autoplay muted loop>
<source src="https://cdn.shopify.com/videos/c/o/v/2874bf558e2b4766a47afd9832f57f00.mov" type="video/mp4">
<source src="https://cdn.shopify.com/videos/c/o/v/f4c4eefdbb554a0bb75c766002ab64e9.webm" type="video/webm">
</video>
</div>
<main>
<footer>
{% section 'main-password-footer' %}
</footer>
<ul hidden>
<li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>
</ul>
</main>
</body>
</html
Hi @bkay67
This is Richard from PageFly - Shopify Page Builder App
Make sure that on your iphone and ipad that the low battery mode has been turned off.
If that mode is on, there's no video can autoplay.
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025