FROM CACHE - en_header
Promotion image

Background Video - Dawn Theme not playing on mobile or ipad

Background Video - Dawn Theme not playing on mobile or ipad

bkay67
Visitor
1 0 0
‎01-30-2024 06:29 PM

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

Labels:
309 Views
0 Likes
Report
Reply 1 (1)

PageFly-Richard
Shopify Partner
4991 1118 1796
‎01-30-2024 08:45 PM

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.

250 Views
0 Likes
Report

Community Blog Articles

shopp-e-1741972742895593780274096851.png
Canadian merchants: Update account details by March 24, 2025 to continue us...

Shopify and our financial partners regularly review and update verification requiremen...

By Jacqui Mar 14, 2025
Shopify_0-1741780029041.png
New learning path from Shopify Academy: How to create a digital marketing s...

Unlock the potential of marketing on your business growth with Shopify Academy's late...

By Shopify Mar 12, 2025
CRO-Community-Promo.jpg
Expert insights on conversion rate optimization (CRO) from Shopify Academy ...

Learn how to increase conversion rates in every stage of the customer journey by enroll...

By Shopify Mar 5, 2025
Terms of Service Privacy Policy