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

[LaCollection]

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"/>

[INA_MSWEB]

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

[LaCollection]

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]

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]

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]

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

[AliReviews]

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. 

[Bradley21]

How do you unmute the video now?