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

[BrianAtWork]

Hi @Expartdesigns,

Yes, the code will work for the homepage. However, I'm sure you'll need to make some code changes to adjust the styling, depending on how you want the video to be displayed.

[DKR]

Hi @BrianAtWork, 

Thank you so much for sharing the idea. Post some more research came across a custom code that autoplays an mp4 (sharing that). Meanwhile I want to know what is a way to add a link on this (I want the customer to click this video on my website which would then take them to my blog or product ?)

<video autoplay="" loop="" muted="" playsinline="controls" style="max-width: 100%; height: auto;">
<source src="https://cdn.shopify.com/s/files/1/0444/3747/1382/files/final_5f20b04b314cd60015b546dd_522690.mp4?v=1..." type="video/mp4">
<img src="Pre.jpg">
</source></video>

Thank you so much!
D

[PaulNewton]

@DKR 

To have clickable links over a partial area on the video use an anchor tag <a href='shopify.com'></a> (or a button).

Then absolutely position it over the video so that the video controls are still useable.

<div class="video-container">
<video id="main-video" autoplay="" loop="" muted="" playsinline="controls" style="max-width: 100%; height: auto;">
<source src="" type="video/mp4">
<img src="Pre.jpg">
</source></video>
<a class="video-link" href="/collections">Shop</a>
<style>
.video-container { position: relative;}
.video-link { position: absolute; width: 50%, height: 50%; z-index: 2; }
</style>

To have an entire videos area a clickable link just wrap it with an <a> tag

Note: 💣 Accessibility issue - user controls play,pause,etc become unusable when making entire videos area clickable link. So IF users need the play/pause controls on a video DO NOT make the whole video a link , and DOUBLE DO NOT do this if there is audio. And ESPECIALLY DONT assume just because you are okay with this behavior that your customers will enjoy the lack of controls.

Though you may need to style, or reset styles, of <a> tags so they work and behave as needed when wrapped around large block content.

<a class="video-link" href="/collections">
<video id="main-video" autoplay="" loop="" muted="" playsinline="controls" style="max-width: 100%; height: auto;">
<source src="" type="video/mp4">
<img src="Pre.jpg">
</source></video>
</a>

Or use the onclick attribute or , create a click handler for a video that has it's ID attribute set

<script>    
   document.getElementById('main-video').addEventListener('click', function() {
       this.pause();
       window.location.href('/collections');
    });
</script>

[DKR]

@PaulNewton Wow, that was way simpler than i thought! Thanks so much... ps. Coffee on me as soon as get my first customer 🙂 

[james0786]

Hi Brian,

Thank you so much for your reply. I really appreciate that. The good news is! The solution is worked. I tried your method and was able to put my video on the product page.

Thank you so much, Brian, for helping me out.

[boldcollab]

Hi Brian, I used this code you provided to add videos in my description box and they were working perfectly fine until I discovered 'easy video shopify app'. I gave the app guys access to my site and they configured something. I didnt like how their videos showed up so I went ahead and added my videos like I did before with your code but they stopped working. Will you help on how i can get them back up? 

[BrianAtWork]

Hi @boldcollab,

Welcome to the Shopify Community!

I understand that after you installed a new app and gave the app's developers access to your site, you are no longer able to use my suggestion for adding a video to your store.

I would be happy to take a look at your store and see if I can find the problem.

Will you send me an email or private message with a link to your store?

Cheers!

[DorisN10]

Hi, how can the video just show up on its on and play on repeat without having to hit the play button? Thank you! 

[hunterandhare]

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!

---

[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? 

[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.