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

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

[abdullah9041]

Hi,

I came across this solution of yours and decided to try it out since I was myself looking for such a solution.

However, the video doesn't appear on my relevant page and it also shows 'Your browser does not support our video" (see attached screenshot)
Any help regarding this would be highly appreciated.

Thanks

[iWoofu]

Works like a dream ... thank you so much

... and if video is not in mp4 format.. you can use cloudconvert.com

[freda1]

Hi , can you expantiate on step 2 if possible can you add picture, where do i find the html 

[Arbaz1]

I have followed your steps, now my video is in the product description but it isn't playing. So what could be the reason ?

[amnonkappa]

Hello , can't follow the instructions till the end. can't find the place to copy the video url

Amnon

[Dave1944]

Hi Guys, does the video appear as part of the Product Description for you or does it become part of the gallery? In my case its adding to the description and I guess it would be the  same for you. If any one knows how to make the vid a part of the Media Gallery that would be nice. thanks

[Jarv]

Does this work if I add the code to the Image Alt text in Debutify theme ?

[Tondamir]

Hello,

i just wanted to ask that i need to make video play regurarly without clicking on the play button if it's possible.
Thanks!

[CaffeVive]

WHY CAN'T WE JUST LINK TO SHOPIFY HOSTED VIDEOS?!?! Seems like this would be so much easier than writing code.. The video slide format is already in place on homescreen. WHy refuse shopify hosted videos? Why only FB, Vimeo??

[rupert__]

Hi Brian,

is there a way to play the video in a loop and without having to press play?

thank you.

[Smeelah]

After a few hours trying unsuccessfully to add the video to my product variant photos using that tutorial, I tried Brian's code and am very happy with the option. Thanks @BrianAtWork !

I made a some adjustments to remove the border, resize it and have it autoplay and loop:

<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 video file url here">
Your browser does not support our video.
</video></p>

[filmmaker123456]

This worked for me too and looks great, but I can't get it to autoplay on Mobile. Its just chosen the first frame as the thumbnail and that's it.

Anyone got any workaround to get it autoplaying on Mobile too?

[Fünf8]

Hey dear,

this is my solution I can not play my video what is the problem?