Why isn't my Alchemy video playing on mobile?

[adoreofficial]

Alchemy video not working on mobile

[Mac]

Hi, @adoreofficial! 

Thanks for reaching out in our Community forums and for sharing your concern, I’d be happy to point you in the right direction.

You mentioned that you are running into issues when trying to view a video on your shop using the Alchemy theme. Are you able to provide some more information regarding error? Are you receiving an error code? Which device and browser are you using? Feel free to share your store’s URL so that I can take a closer look into your specific situation. In the meantime, here are a few troubleshooting steps that you can attempt:

• Try a different web browser to rule out any browser issues. 
• Try another device, like another mobile phone.
• Try another internet connection (switching to a cellular network on a phone rather than wifi, for example)
• Ensure you do not have any firewalls or pop up blockers enabled on the device as these can interfere.

If these steps do not solve the problem, I'd recommend a installing a fresh version of your theme and attempt to replicate the issue as existing code might be causing the issue. Alternatively, I'd suggest to consult your theme developer. It looks like you are using a third-party theme so you can contact your theme developer to learn more about factors that are affecting your video on mobile.

Feel free to reply back to this thread with any questions or updates and we can continue our conversation further!

[adoreofficial]

Thank you for your reply.

please find my website and note that the problem only appears on the mobile 

www.adoreofficial.co

[Mac]

Hi again, @adoreofficial! 

Thank you for the response and for attempting the troubleshooting steps. Now that we have ruled out a local issue, this may be related to decisions made by OS developers for Android and iOS. When on mobile, the option of a video playing automatically upon visiting the site is not available to reduce the chances of unwanted data use. In this case, it's required that the user take some action to begin playback. I'd suggest reaching out to your theme developers and inquire if they are able to change the video style from 'Background Video' to 'Background video with play button' as this will allow viewers to play the video on mobile instead of viewing the still image. 

If your theme developer is unable to help you with this change, I recommend speaking with Shopify Experts. This is a marketplace that connects you to professionals and will make the necessary changes for you. If you’d like to know more about finding the right Expert, please click here.

Feel free to reply back to this thread with any questions or updates and we can continue our conversation further!

[indextwo]

For anyone else looking for an answer to this specific issue: yes, it's true that some mobile browsers may prevent playback on an unmuted video; but if the video is muted, then there should be no issue with playback (I've done this plenty of times on other sites).

The issue is that the Alchemy theme specifically prevents an embedded video from YouTube or Vimeo from being embedded if the screen size is less than 768px wide.

If you open up the theme.js file in the assets folder and scroll to around line 1309 you should find the _._permitPlayback function within the theme.VideoManager function. Replace that function so it looks like this:

_._permitPlayback = function (container) {
    //  The original line prevented video embedding if the browser width is less than 768px
    // return !($(container).hasClass('video-container--background') && $(window).outerWidth() < 768);

    //  Allow playback in any case
    return true;
};

Once that's done, your (hopefully muted) video should play automatically on mobile no problem.