How to add my own video to product page (Not youtube video)

[james0786]

Hello Everyone,

I made a product video on my camera and now I want to add this video to my product page. I could not find a way to add the video. There is an option to add youtube video with embed code but how can I add my own video?

Looking forward to this problem

[TuJ]

@hunterandhare

I have just randomly stumbled upon this but thought I would share a way to autoplay this.

HTML5 Video allows for you to add an attribute of 'autoplay' and it will do exactly that.

Just shout if you have any problems.

Thanks,

George

[hayhamLT]

even if I check "autoplay", it's not playing, you have to go and enable show controls and then hit the play button

[TuJ]

Hi,

If you are viewing this on a mobile/tablet device that has 'low power mode' and this is enabled it will not autoplay as this feature is trying to save power usage and autoplaying a video will use a significant amount of power. Thus defeating the purpose of 'low power mode'

Thanks,

George

[hayhamLT]

I'm viewing it on iMac, Chrome browser

[rdiddy14]

hello i added all the code but the video does not auto play or loop how do i get my video to do that? 

please help thank you 

[TMills]

How do you convert the video to auto play or loop? I saw a suggestion but are there directions?

[MissN]

Hello,

how exactly do you that in order for the video to play on a loop? 

[Kenneth_Bon]

---

@MissN wrote:

Hello,

how exactly do you that in order for the video to play on a loop? 

---

I guess you can do this:

<video style="width: 100% !important; height: auto !important;" controls="controls" loop="loop"> 
<source src="xxxxx" type="video/mp4"></source>
</video>

---

---

[bhammond]

I'm added a video to my website but I'm not sure how to autoplay the video/ loop the video. Any advice? Thank you!

[Smeelah]

Read the previous post lol

[kuchak]

---

@hunterandhare wrote:

Hey so I used the link for my home page and it worked great, I am just wondering if there is a way to have the video play automatically rather then the customer having to click play. 

Thanks so much!

---

@BrianAtWork wrote:

Hi @james0786,

Welcome to the Shopify Community!

I understand that you want to add your own video to your product page. I may be able to help you with this.

Note: Make sure that you use MP4 video format, which is the most widely supported video format currently available.

Note: If your video file is larger than 20MB, you'll have to upload it to YouTube and use the embed code. Otherwise, you'll need to find a hosting provider for your video, instead of using my Step 1 suggestion of Shopify Files.

Step 1: Upload your video on the Files page:

1. From your Shopify admin, go to Settings > Files.
2. Click Upload files.
3. Select the video to upload. Click Open.
4. Copy the URL of the video and store it somewhere (we'll need it again soon):
   

Step 2: Add HTML content to your product with the rich text editor:

1. Click the Show HTML button to view the HTML code for the product description inside the rich text editor:
   
2. Get your video URL from Step 1. Add this code to the HTML:
   

   <video controls="controls" style="max-width: 100%; height: auto;">
     <source src="your_url_goes_here" type="video/mp4" />
   Your browser does not support our video.
   </video>

   Be sure to replace "your_url_goes_here" in the code with the URL from Step 1.
3. Click Save.

Let me know if this solves your problem or if you need further help!

---

---

@BrianAtWork wrote:

Hi @james0786,

Welcome to the Shopify Community!

I understand that you want to add your own video to your product page. I may be able to help you with this.

Note: Make sure that you use MP4 video format, which is the most widely supported video format currently available.

Note: If your video file is larger than 20MB, you'll have to upload it to YouTube and use the embed code. Otherwise, you'll need to find a hosting provider for your video, instead of using my Step 1 suggestion of Shopify Files.

Step 1: Upload your video on the Files page:

1. From your Shopify admin, go to Settings > Files.
2. Click Upload files.
3. Select the video to upload. Click Open.
4. Copy the URL of the video and store it somewhere (we'll need it again soon):
   

Step 2: Add HTML content to your product with the rich text editor:

1. Click the Show HTML button to view the HTML code for the product description inside the rich text editor:
   
2. Get your video URL from Step 1. Add this code to the HTML:
   

   <video controls="controls" style="max-width: 100%; height: auto;">
     <source src="your_url_goes_here" type="video/mp4" />
   Your browser does not support our video.
   </video>

   Be sure to replace "your_url_goes_here" in the code with the URL from Step 1.
3. Click Save.

Let me know if this solves your problem or if you need further help!

---

---

This was SUPER helpful thanks!!  You mentioned that each vid has a 20MB limit, but does shopify have an overall storage limit for all the files?

[rdiddy14]

how do i get the video to auto play and loop on my product page? 

[NirmalOnline]

As per the solution suggested by you, we are supposed to add the video url statically to each product page but how is it possible to add the url for each product. Is there any way that the video url is automatically taken through the video connected to a particular product?

[Growthfamily]

Hi NormalOnline, 

You can use app like My Stories in order to add a different video for each products. 

Hope that helps! 

Regards,

[Lisa1503]

I did it just like that. But if I save it, my video won't show up. It's just white and there's nothing you can do.

[jostho6213]

For Google Chrome you may need to add a <script> that plays the video directly. Try <video id='autoPlayVideo'></video> <script>document.getElementById('autoPlayVideo').play()</script>

Hope that helps!

[Hayder_Hasan]

It worked .. Thank you very much 

[PalmtreeChops]

Hi Brian,

Thanks for this thorough answer!

I am currently looking to create a site which would host video content on a hosting provider in China. The main reason to do this is to gain access to Chinese CDNs so users in China will have a smooth viewing experience.

Do you know of any restrictions or issues on Shopify's side when it comes to using Chinese video hosting services (for example https://www.polyv.net/vod/en/ or Tencent cloud)?

Thank you!

[Sachiyo1105]

Hi Brian, may I know if I can upload MOV file as I usually take a video with iOS. I tried to change the code for type mov but failed...

[iSimpli]

Hi @BrianAtWork ,

I would like to know if there is any solution to have something to quick select the video from the Customize area:

 "blocks": [
      {
        "settings": [
            {
                "type": "video_picker"
            }
        ]
      }
]

Right now I am inserting the video URL as a "type": "text", but it would be really great if we didn't need to go to Settings > Files, find the file and copy the URL every time that we want to make a change. It is not a big issue, I just would like to know if there is a better approach.

Thank you,

Italo.

[jasonavada]

Hello there,

According to an estimation, there is about 85 percent of online customers likely to purchase an item after watching product videos. Hence, product videos, currently, seem to be trendy and if you do not include your products in those videos, it means you are losing a significant number of loyal customers

In this article, you'll be learned about how to add your videos to Shopify product page and to all pages on your store as well. Check it out 😉

[Nejc]

Thank you a lot for your answer! I would just like to know, how can video be autoplayed and looped? Because right now, customers need to click play to start playing the video.

Thank you,

Nejc.

[Tashtae]

Hey, if you wanna have it played on a loop and muted here is the tutorial.

assuming that you followed all the steps brian outlined just change the top of the code that says

<video controls="none" style="max-width: 100%; height: auto;">

to

<video loop="" muted="" autoplay="autoplay" preload="" id="vid">

thus the entire new code would be:

<video loop="" muted="" autoplay="autoplay" preload="" id="vid">

<source src="your_url_goes_here" type="video/mp4" />
Your browser does not support our video.
</video>

PS. Remember to replace "your_url_goes_here" with the URL for the video that was created when you uploaded it to files in Shopify.

Also, remember that the video has to be mp4 and no larger than 20MB.

[pmirt]

Hi 

I used the code suggested for playing a video on my product page automatically and muted.  It works perfectly on iPhone and Adroid phones but does not work on desktop browsers, either Chrome or Edge, and I have no idea why.  On chrome an outline of the video shows and it is advancing but but no video. it's just white.  On Edge, the video starts to play and then just stops.  Again, works find on phones, not on desktop.  Suggestions?  Many thanks.

pmirt

[Kenz6900]

Hi Brian, may i know how to add thumbnails to the video?

[Khaleed]

Did you ever get a solution? Needing this for my store

[dalochllc]

Hi,

This worked perfectly on my page. Is there a way for the video to display in the header area and remove the header slideshow?

[Tashtae]

@dalochllc @TMills 

Hey, if you wanna have it played on a loop and muted here is the tutorial.

assuming that you followed all the steps brian outlined just change the top of the code that says

<video controls="none" style="max-width: 100%; height: auto;">

to

<video loop="" muted="" autoplay="autoplay" preload="" id="vid">

thus the entire new code would be:

<video loop="" muted="" autoplay="autoplay" preload="" id="vid">

<source src="your_url_goes_here" type="video/mp4" />
Your browser does not support our video.
</video>

PS. Remember to replace "your_url_goes_here" with the URL for the video that was created when you uploaded it to files in Shopify.

Also, remember that the video has to be mp4 and no larger than 20MB.

[ElleRoshelle]

Hey Brian! I used your solution and it worked perfectly! 

[PeterWong]

---

@BrianAtWork wrote:

Hi @james0786,

Welcome to the Shopify Community!

I understand that you want to add your own video to your product page. I may be able to help you with this.

Note: Make sure that you use MP4 video format, which is the most widely supported video format currently available.

Note: If your video file is larger than 20MB, you'll have to upload it to YouTube and use the embed code. Otherwise, you'll need to find a hosting provider for your video, instead of using my Step 1 suggestion of Shopify Files.

Step 1: Upload your video on the Files page:

1. From your Shopify admin, go to Settings > Files.
2. Click Upload files.
3. Select the video to upload. Click Open.
4. Copy the URL of the video and store it somewhere (we'll need it again soon):
   

Step 2: Add HTML content to your product with the rich text editor:

1. Click the Show HTML button to view the HTML code for the product description inside the rich text editor:
   
2. Get your video URL from Step 1. Add this code to the HTML:
   

   <video controls="controls" style="max-width: 100%; height: auto;">
     <source src="your_url_goes_here" type="video/mp4" />
   Your browser does not support our video.
   </video>

   Be sure to replace "your_url_goes_here" in the code with the URL from Step 1.
3. Click Save.

Let me know if this solves your problem or if you need further help!

---

Hi,@BrianAtWork

That's working! Thanks.

But the video does not play on the phone, only could play on the PC.

How could I fix it?

Thanks again.

[Sneakermask]

@PeterWong @BrianAtWork Hi guys I am also interested in this, how do I get my video to play automaticly and on loop on the mobile? Desktop version works perfectly but on phone video is not reckognized,

Thanks

[BrianAtWork]

@Sneakermask Autoplay for videos no longer works reliably for modern web browsers, especially on mobile devices. Many browsers/devices are blocking the autoplay feature of videos by default.

However, in your particular case, the problem may be that your phone is in "low power" or "power saving" mode. In this mode, videos will not autoplay, even if your code is correct.

Also, autoplay will not work on mobile unless the video tag has these two attributes set: "muted" and "playsinline".

"muted" means your videos will not autoplay unless the audio is muted. 

"playsinline" means that the video is to be played "inline", that is within the element's playback area, and not fullscreen.

This code should work for you, unless your mobile device is in "low power" or "power saving" mode:

<video autoplay loop muted playsinline controls style="max-width: 100%; height: auto;">
  <source src="your_url_goes_here" type="video/mp4">
Your browser does not support our video.
</source></video>

Be sure to replace "your_url_goes_here" in the code with the correct URL of your video.

Cheers!

[Sneakermask]

It worked perfectly, 

Thank you so much

[hannahk20]

Thank you! This worked. But It is displaying video controls. How can I make it to autoplay muted in mobile with the "playsinline" but without video controls.

Thanks for your time,

[Emarketing]

Note: If your video file is larger than 20MB, you'll have toupload it to YouTube and use the embed code. Otherwise, you'll need to find a hosting provider for your video, instead of using my Step 1 suggestion of Shopify Files.

Hi! 20MB video isn't going to be long or high resolution. Why is the limit 20MB and how can be increase this limit?

And if I find a hosting provider to upload the first (not a video sharing site), then how do I put the video onto the page?

[BrianAtWork]

Hi @Emarketing,

You're right that 20MB is limiting, regarding length and resolution of the video. However, for Shopify Files, the limit cannot be increased at this time.

To answer your question, file size limitations are often imposed: (a) to prevent abuse of the file hosting service, (b) to improve the end-user experience by discouraging the use of large file sizes which are slow to load, and (c) because the hosting provider is not set up or optimized for serving large files. 

Quickly distributing large files across the world requires a special infrastructure that is optimized for that task. Shopify may choose to offer this service in the future – but for now, your best bet is to use a hosting provider that specializes in large video files.

Once your video is uploaded to a hosting provider, you can simply use the URL you are given and place that in the code instead.

[PaulNewton]

@Emarketing 

Why is the limit 20MB and how can be increase this limit?

Admin files can be used a bit differently than other files and it's one of the older systems so it has sane limits.

However product media was released

https://changelog.shopify.com/posts/video-3d-product-media

and it does have different characteristics on it's published limitations (60 seconds max, 1 GB size max) that may fit some scenarios needing advanced customization.

When available use sparingly as site content videos per @BrianAtWork 's a super important point about slow loading user experiences.

Slow sites are an expensive mistake to make if you choose to use unnecessarily large video files.

Optimize video, or just use gifs, and respect your customers time,suroundings,ears, and dataplans.

https://changelog.shopify.com/posts/video-3d-product-media

https://help.shopify.com/en/manual/products/product-media/product-media-types#videos

https://help.shopify.com/en/partners/resources/creating-media/product-media-api-liquid

https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video

Also see lazyloading video

http://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video#laz...

[yingming]

Hi Brian,

Thanks a lot for the solution, it worked well.

However, when views on iPhones, there isn't any thumbnail and it's just blank with a "play" icon:

Anyone knows how to fix this? Thanks!

[Khaleed]

Did you ever get a solution?? Needing this for my store ASAP

[ambrane]

how to make it on autoplay mode

[ambrane]

how to make it autoplay mode.

[Ekook]

Hi Bryan,

I hope you are well. I am writing to you regarding EKOOK. Would it be possible to use QR codes that we put on our boxes to redirect our customers to a video on our website?

So, we would like ONLY the customers who have a QR code to be able to watch a specific video. Customers without a QR code (because they do not one of our products) will not be able to watch the videos by just browsing our website (they should be "concealed").

Thank you very much.

Kind regards.

[BrianAtWork]

Hi @Ekook,

I understand you want to create a QR code that you put on your boxes to direct your customers to a video on your website. You don't want this video to be found by just browsing your website. You would have to actually scan the QR code on the box to find the video.

The fastest way to do this would be to create a page for your video and use a QR code generator.

I hope this points you in the right direction. If you need further help with getting things set up, feel free to reach out to me.

Cheers!

[Ekook]

Hello Brian,

thank you for your reply. I will try that. A question please, one of the texts I have translated into Italian, on the homepage, cannot be re-arranged, since I have used Etranslate and therefore translated the strings. Would it be possible to create the same layout as the English text?

Thank you, have a lovely day.

[Kenneth_Bon]

I've tried and tried - and the video does not run.

It just shows a black default with controls - nothing happens. I've tried to implement it several ways.

What am I doing wrong?

https://www.authentic.dk/pages/testside

<video style="width: 100% !important; height: auto !important;" controls="controls">
<source src="https://info-at-authentic.wistia.com/medias/0ojz21b6em" type="video/mp4" /></video> 

<video playsinline="true" controls="controls">

    <source src="https://info-at-authentic.wistia.com/medias/0ojz21b6em" type="video/mp4" />
<p>Sorry html5 video is not supported in this browser</p>

</video> 

<video playsinline="true" controls="controls">
    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/master.m3u8?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=BIQQpuyEVnyt9HUw4o9QOmQ1z2c=" type="application/x-mpegURL" />

    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-360p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=1kEi8GmNIssxVvjyzy7AOuGP-E0=" type="video/mp4" />
    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-480p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=8Lt74XmFWP6hOF1WRdqNkDWRm2U=" type="video/mp4" />
    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/HD-720p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=vlNXWpvgRT2bghrWovJPrN8w3mc=" type="video/mp4" />
<p>Sorry html5 video is not supported in this browser</p>
</video>

[Kenneth_Bon]

Partly solved my own part.

The link has to be to a specific video which I missed. I ended up compressing the video file and uploaded it in Shopify and now it works.

[Ekook]

Hi @BrianAtWork,

thank you for your kind help. A question if possible please: we would like the same image but with different languages to be shown on our homepage so that, when you switch to a different language, you can see it in your language.

We have the images translated in two languages, how would it be possible to upload them? 

Thank you very much, have a lovely day.

---

[Ekook]

Hi Brian,

how are you? Unfortunately it seems the header with the logo and options (homepage) are no longer dispalyed in the mobile version and it directly starts by displaying the slideshow. Also, would it be possible to create a Shop now button on the homepage right above the slideshow, on the white part?

Thank you very much, have a lovely evening.

[Ekook]

Hi @BrianAtWork , thank you very much for your help.

Would you mind helping me create a "Shop Now" button on the homepage? I have created one by following a video, but I cannot modify it (I would like to make it bigger and more attractive).

Thank you very much, have a lovely day.

Francesco

[PaulNewton]

@Ekook keep in mind any page you make may be crawled by search engines or found by users using sitemap tools,etc thus the video will be discoverable too.

https://help.shopify.com/en/manual/promoting-marketing/seo/hide-a-page-from-search-engines

If you can't edit your robots.txt the last resort is to put some fake url parameters in the url, or use the literal view parameter, so only those with the FULL url+params can see the video by using javascript to check window.location. And or in combination with a logged in customer check.

Otherwise consider using @BrianAtWork's recommendation but with either a private youtube video link, or a something like a google-drive view only with link shared url.