Re: Video in product page

Solved

How can I auto-play my product page video?

Kremena_Sarieva
Tourist
4 0 0

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 

Accepted Solutions (2)
osamafarooqi71
Shopify Partner
259 22 45

This is an accepted solution.

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

Shopify Theme Developer | Contact me | Hire expert
- Was my reply helpful? Click Like 🙂 to let me know | Buy Me Coffee
- Was your question answered? Mark this as Accepted Solution

View solution in original post

Vivek_goyal
Shopify Partner
54 5 14

This is an 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>

 

ScalePrint Designer & Variants: Offer customizable products in your Shopify store with ease. (Try for free)
Need a Shopify developer? Hire Us
Email: info@scaleupprint.com For Shopify tips & tricks follow our YouTube channel

View solution in original post

Replies 8 (8)

osamafarooqi71
Shopify Partner
259 22 45

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}}

Shopify Theme Developer | Contact me | Hire expert
- Was my reply helpful? Click Like 🙂 to let me know | Buy Me Coffee
- Was your question answered? Mark this as Accepted Solution
Kremena_Sarieva
Tourist
4 0 0

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

osamafarooqi71
Shopify Partner
259 22 45

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 

Shopify Theme Developer | Contact me | Hire expert
- Was my reply helpful? Click Like 🙂 to let me know | Buy Me Coffee
- Was your question answered? Mark this as Accepted Solution
Kremena_Sarieva
Tourist
4 0 0

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
Shopify Partner
259 22 45

This is an accepted solution.

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

Shopify Theme Developer | Contact me | Hire expert
- Was my reply helpful? Click Like 🙂 to let me know | Buy Me Coffee
- Was your question answered? Mark this as Accepted Solution
Kremena_Sarieva
Tourist
4 0 0

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

 

Vivek_goyal
Shopify Partner
54 5 14

This is an 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>

 

ScalePrint Designer & Variants: Offer customizable products in your Shopify store with ease. (Try for free)
Need a Shopify developer? Hire Us
Email: info@scaleupprint.com For Shopify tips & tricks follow our YouTube channel

VirtualSand
Visitor
2 0 0

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>