All things Shopify and commerce
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
Solved! Go to the solution
This is an accepted solution.
Please confirm if you add autoplay to the video tag used for mobile.
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>
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}}
Thank you for the reply. Where should I add exactly?
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
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?
This is an accepted solution.
Please confirm if you add autoplay to the video tag used for mobile.
I don't know where is the tag for mobile.
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>
Here's what worked for me:
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025