How can I fix a muted autoplay video not working on mobile?

How can I fix a muted autoplay video not working on mobile?

LaCollection
Excursionist
30 1 1

Hello all, 

 

I just launched my website and I was disappointed to find a short video I have on my main page does not work on mobile at all but shows ok on the desktop. On mobile, it shows a blank space. It was supposed be a muted autoplay video and I have been looking on google and saw some replies about this same issue. I tried a few of the suggestions- with no luck. Thought I would make my own post as maybe it is something unique to the coding. I am using the publisher theme and here is the code I was using. Please help as I would like to fix this issue ASAP!

 

<style>

video {

display: block;

margin: 0 auto;

width: 50%;

}

 

@media screen and (max- width: 880 px) {

video {

width: 90%;

</style>

 

<video autoplay loop playsinline muted>

<source src=“https://cdn.shopify.com/videos/c/o/v/5efe33301bcd494884cd7931911ec317.mp4"/>

Replies 7 (7)

INA_MSWEB
Shopify Partner
1281 144 164

Hi @LaCollection 


I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

You can replace this HTML tag:

<video autoplay loop playsinline muted>

<source src="Video URL" type="video/mp4">

</video>

 

 

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: [email protected]
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

LaCollection
Excursionist
30 1 1

thank you for the feedback unfortunately it did not work. I placed it in the custom liquid section then inserted my own video url where you indicated. Is that what I should be doing? What I am seeing now is a very large blank section on my mobile device.

Bradley21
Tourist
11 0 0

I have my video playing but I want it unmuted, the code that is working for visuals on desktop and mobile: 

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video autoplay playsinline loop muted>
<source src="" type="video/mp4">
</video>

Bradley21
Tourist
11 0 0

Please help I have been trying to get my video imbedded for hours. I finally have it working on both desktop and mobile but only when it is muted. How do I unmute?

Bradley21
Tourist
11 0 0

I need the video to autoplay with sound when navigating to the page

AliReviews
Shopify Partner
773 90 356

Hello @LaCollection ,

 

Your code has a little error, replace it with this one:

<style>
  video {
    display: block;
    margin: 0 auto;
    width: 50%;
  }

  @media screen and (max-width: 880px) {
    video {
      width: 90%;
    }
  }
</style>

<video autoplay loop playsinline muted>
  <source src="https://cdn.shopify.com/videos/c/o/v/5efe33301bcd494884cd7931911ec317.mp4" />
</video>

 

Hope this can help. Let us know if you need any further support

Ali Reviews team. 

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!
Bradley21
Tourist
11 0 0

How do you unmute the video now?