Why isn't the embedded video playing on mobile view?

Store Design
1

Hi everyone, I am designing a website for a friend and basically, there is a “how to use” video that she wants across multiple pages on her site. So far I’ve added it to the homepage and an about page. The video great in desktop view, but doesn’t play at all in mobile view. Her website uses the Brooklyn theme, but she would prefer to avoid using the video section template as she doesn’t want the bulky look of an embedded video with all of the controls and youtube logo, etc. if it can be avoided.

This is the code I’ve been using to get the video to autoplay:

# How to use our Aura Mists

Does anyone know of any work around or better alternative? I am very new to coding but would appreciate any feedback and would be happy to give it a shot if anyone knows of a solution.

Thanks for your time.

2

Update: I seem to be able to partially fix the above issue with the following change of code:

However, the video is no longer autoplaying :disappointed_face: Is there anyway to make it both desktop + mobile-friendly, and enable autoplay?

3

UPDATE: I have found a solution that was kindly shared by Amazing Learning on Youtube (thank you @mohdramzaan112)

Here is the link to the code: https://github.com/mohdramzaan112/shopify/blob/main/embed_video.html

This is the code that he shared that worked for me in case it is helpful for others:
4

Wondering if you might be able to help me - I have added a custom liquid section with code to display video on homepage but am looking for code so that I can have an alternative video play (different aspect ratio) for those viewing on mobile. Can anyone help?