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 @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!

[TroyNeally]

I am also having this same problem.  When I load the MP4 into the product media area it doesn't show up.  I did do the work around but that is ok for now, just would like to be able to add more videos to my products.

Regards,

Troy N.

www.JustInCaseRescue.com
Info@justincaserescue.com

[Takeoffscooters]

Hi this method worked for me however, all of my mp4 files i add this way are missing thumbnails, the thumbnail is basically  a blank screen. i would love to add my own personalised thumbnail to these can you please advise? 

[SarahS23]

We have the same issue! let us know if you found a solution for this. Much appreicated! 

[Takeoffscooters]

Hi, the solution I’ve used for now is at the end of your mp4 url add #t=1 . This will allow the videos thumbnail to display whatever is showing 1 second into the video rather than a blank screen however, the disadvantage of this way is, the video literally starts from whatever second you put after your #t=
Hope this helps

[SarahS23]

Thanks so much for this!

We added that#t=1 and the modified code above by one of the members seems to autoplay on desktop but it still doesn' t autoplay on mobile.

<p style="text-align: center;"><video loop="loop" muted="" autoplay="autoplay" preload="" id="vid" style="max-width: 80%; outline: none; height: auto;" outline="none">
<source src=""your_url_goes_here #t=1" />
Your browser does not support our video.
</video></p>

If you ever found a solution please let us know! 

[TroyNeally]

How are you adding this.. what are the steps.  I tried to cut/paste the code, I even did ADD MEDIA and it still didnt work.  I am using the VENTURE theme.

<p style="text-align: center;"><video loop="loop" muted="" autoplay="autoplay" preload="" id="vid" style="max-width: 80%; outline: none; height: auto;" outline="none"> <source src="https://youtu.be/JYL8tfnstmE #t=1" /> Testing Video </video></p>

This is the code I used and it doesnt work.  What am I doing wrong?

[SarahS23]

maybe it's because you are using a youtube link? Mine was a .mp4 file that was uploaded directly on Shopify in the "files" section. I then copied the link it provided and inserted in the code.

My knowledge is very limited in this area though! I am just following the above advises 🙂 

[TroyNeally]

Ok let me upload and MP4 and give it a try.

[TroyNeally]

Thanks for the help Sarah!  Are you adding this video to your product DESCRIPTION area or in the media area where the pictures of a product would go?

[SarahS23]

No problem!

I'm inserting it in the description part of a page actually, not a product page. Does it work for you on the product page on mobile?

[TroyNeally]

I haven't tried it on a mobile device yet.  But when I click on the "Add Video" button where you put your description, it works great.  Also works when you goto YOUTUBE and share a video and share it with EMBED Iframe URL code as well.  So if you wanted to show a video that you do not have uploaded, it works.

[SarahS23]

Thanks so much for the below code Brian.

We tried it on another page and it worked too. The only thing is it does not autoplay, is there a way to do that? 

If not, how can we change the cover photo? Right now it just shows a white background with a play button and unless you click on the play, you just see white.

Would appreicate your help!

[BonzaDogTreats]

Hi Brian

I am trying to add a 3 second video to a product page. I've uploaded it to the files area, and it plays from there. 

I used the code you shared and put this in HTML with my image file name, but all I'm getting in my product page is a black screen. Can you tell me where I'm going wrong please?

[lullalevart]

Hi there, I put the following code on the product page, but, appearing in black, the video not working? Did I miss up anything?

my mp4 url link = from setting-file-select file name-copy link

<video style="width: 100% !important; height: auto !important;" controls="controls" loop="loop"> 

<source src="my mp4 url link" type="video/mp4"></source></video>

[Abundantia]

This happened to me as well.  Once you click save and then preview, it will work properly.

[ashleyw6]

How to I make the video fit the screen on desktop mode? it's just small and to the left.

[Abundantia]

Thank you for the direction.  This worked for me, however, I didn't realize I shot the video in portrait rather than landscape.  It is now small with the black blocks on the side.  Is there a way to fix this orientation, or would you suggest I re-shoot the videos in Landscape (Clothing company btw)

[MsSkeptical]

i think that would be the best course of action for that. 🙂

[Dermapparence]

HI, do you have code for automatic play video?

[hustlinmomma]

This is difficult and not working for me i could use some help

[Sensei]

Well, there are a lot of Shopify apps that help you embed videos from YouTube, Vimeo, IGTV, and whatnot but a lot of them don’t have a feature where you can add videos of your own.

I was thinking of the same feature lately, I just shot a couple of product videos with a white backdrop and felt like it’s better to add these videos to my online store rather than social channels. The reason being, I wanted to create a sense of exclusivity when my visitor comes to my online store. I didn’t want them to see the same thing they saw on YouTube or Instagram.

But I was also wondering, what if adding videos to my online store will lower my page load speed? And reducing my online store’s loading speed is the last thing I would want to have.

There are a couple of apps that allow you to add videos of your own but they don’t have a feature that could help you with adding videos from channels like YouTube or Instagram.

And if you’re just starting out I am sure you wouldn’t want to have multiple apps just to add videos. 🙂

After hunting for the app that could help me add videos and asking my friends for it, I came across Videowise. It simply allows you to add your own video on the product/landing page, it fetches videos from YouTube, Instagram, TikTok and other channels.

It's quite simple to set up and allows you to add videos of your choice in just a few clicks. I am still on the FREE trial, but yeah this week I am planning to upgrade it to a paid version. I hope I don’t regret even a single penny spent on it lol.

[Titanofficial]

Hi Brian,

Are we able to upload videos greater than 20MB? We have videos larger in size and most around 30-40MB.

www.titanworld.com.au

Thanks

Kevin Shah

[SkylerWu]

Hi. Thanks for answer and it works well! I'd like to know if I could edit the code and make the video play automaticatily in my website?

[OlivierPoisson]

Hi, is there any way to customize the controls of the video ? Like autoplay and muted

[adam70461]

It worked! Very easy

[Wardo]

Hey! I used your link and worked great for single video. I ideally want to put 3 videos next to each other side by side. Any advice on how to achieve that? Thanks!

[D_7]

Hi,
If my video file is too large for uploading directly into Shopfi, and I don't want to embed YouTybe - (as the video dimensions doesn't fit YouTube)
Can I somehow use DropBox or GoogleDrive to host and embed?
Thanks

[IL2]

Hi Brian!

Using your instructions, I have been able to add the video as part of the description of the product. Is there any way to add the video as "media"? So it will show just as the pictures from the product.

Thank you very much in advance!

Ines 

[jasmin336]

Hi BrianAtWork ... I have a video that I created and downloaded to my PC along with a thumbnail that I chose to upload for it in YouTube (having downloaded it again afterwards). I don't want to use the YouTube URL because it shows YouTube and my channel but I only want to use my own media for this. The video and thumbnail work great on desktop, but not on mobile. On mobile, all I have showing is the play button and a completely blank area for the video and that looks unprofessional. Is there any additional coding that I should include to make sure that the thumbnail is going to show up on mobile? If so, please share. Thanks in advance!

[dievart]

how do you then center the video in your post?

[Christian52]

Hi, I used the exact same steps but the video shows up on my product page like this 

How do I fix it? Can you help?

[makhdoomzia]

Bundle of thanks Brian, Step 2 works for me, because the files tab was not available in my settings. Once again thanks. 

[Expartdesigns]

Hi Brian, does this solution work for adding your own video to homepage?