How can I auto-play my product page video?

[Kremena_Sarieva]

Hello, I insert my own video in the product page.

<video controls="controls" style="max-width: 100%; height: auto;">
<source src="https://cdn.shopify.com/videos/c/o/v/e7a656e061e448f38f6a6483e472b2d6.mp4" type="video/mp4">
Your browser does not support our video.
</source></video>

But the video doesn't automatically start in the product page. There is a black tumbnail with play button.

What is the problem? How could 

[osamafarooqi71 · Accepted solution]

Please confirm if you add autoplay to the video tag used for mobile.

[osamafarooqi71]

Hello @Kremena_Sarieva , in order to play the video automatically, you'll need to add autoplay property to true in tag.

Simply add autoplay="true" in your video tag.

If you're using the liquid tag. Please use it as below.

{{ section.settings.video_1 | video_tag, autoplay: true}}

[Kremena_Sarieva]

Thank you for the reply. Where should I add exactly?

[osamafarooqi71]

Hello @Kremena_Sarieva , you simply need to add this in video tag, as below.

<video controls="controls" autoplay="true" style="max-width: 100%; height: auto;">
<source src="https://cdn.shopify.com/videos/c/o/v/e7a656e061e448f38f6a6483e472b2d6.mp4" type="video/mp4">
Your browser does not support our video.
</source></video>

Regards,

Osama Farooqi 

[Kremena_Sarieva]

Thank you very much! I'm happy. On desktop version is OK, but on mobile version does not play automatically. Is there anything to add for mobile?

[osamafarooqi71 · Accepted solution]

Please confirm if you add autoplay to the video tag used for mobile.

[Kremena_Sarieva]

I don't know where is the tag for mobile.

[Vivek_goyal · Accepted solution]

hi @Kremena_Sarieva ,

Chrome does not allow autoplay if the video is not muted.

So to autoplay video you need to set both autoplay and muted attribute.

Here is the link for more details related to mobile 

https://developer.chrome.com/blog/autoplay-2/

Here is the sample: 

<video controls="controls" style="max-width: 100%; height: auto;" autoplay="autoplay" muted>
<source src="https://cdn.shopify.com/videos/c/o/v/e7a656e061e448f38f6a6483e472b2d6.mp4" type="video/mp4">
Your browser does not support our video.
</source></video>

[VirtualSand]

Here's what worked for me:

<style>
video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;

    autoplay: true;
}
</style>

<video muted autoplay playsinline loop>
    <source src=""
            type="video/mp4">
</video>