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

james0786
Visitor
2 0 7

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

Replies 112 (112)
hayhamLT
Visitor
2 0 1

I'm viewing it on iMac, Chrome browser

rdiddy14
Visitor
2 0 0

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
Visitor
1 0 1

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

MissN
Visitor
1 0 2

Hello,

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

Kenneth_Bon
Pathfinder
122 0 73

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




Owner @ https://en.authentic.dk
bhammond
Visitor
1 0 0

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
Navigator
332 1 91

Read the previous post lol

kuchak
Excursionist
33 1 4

@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):
    Screen Shot 2019-08-24 at 9.00.49 AM.png

 

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:
    click-show-html-c4a05c36637e301be83a98ed5928c72d3348e385f2e0082cac21268b3516d409.png
  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):
    Screen Shot 2019-08-24 at 9.00.49 AM.png

 

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:
    click-show-html-c4a05c36637e301be83a98ed5928c72d3348e385f2e0082cac21268b3516d409.png
  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
Visitor
2 0 0

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

 

NirmalOnline
Visitor
1 0 0

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
Shopify Partner
32 1 3

Hi NormalOnline, 

 

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

Hope that helps! 

 

Regards,

Discover My Stories: Embed social-style video stories on product pages

If you find my reply helpful, please hit Like and Mark as Solution

Lisa1503
Visitor
1 0 3

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
Visitor
1 0 0

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
Visitor
1 0 0

It worked .. Thank you very much 

PalmtreeChops
Excursionist
20 2 3

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!

Warmly,
Adam

- Need a Shopify developer? Chat on WhatsApp
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Sachiyo1105
Shopify Partner
1 0 0

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
Visitor
2 0 3

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
Shopify Partner
333 11 42

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 😉

I'm Jason Dao, Manager of Research & Development Department at Avada Ecommerce.

Nejc
Visitor
1 0 0

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
Shopify Partner
2 0 7

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
Visitor
1 0 0

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
Visitor
1 0 0

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

Khaleed
Excursionist
29 0 5

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

dalochllc
Visitor
1 0 0

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
Shopify Partner
2 0 7

@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
Visitor
1 0 0

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

PeterWong
Visitor
2 0 1

@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):
    Screen Shot 2019-08-24 at 9.00.49 AM.png

 

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:
    click-show-html-c4a05c36637e301be83a98ed5928c72d3348e385f2e0082cac21268b3516d409.png
  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,@

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
Excursionist
14 0 10

@PeterWong @

 

BrianAtWork
Shopify Partner
245 59 184

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

 

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

Sneakermask
Excursionist
14 0 10

It worked perfectly, 

 

Thank you so much

hannahk20
Visitor
1 0 0

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
Tourist
10 0 1

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
Shopify Partner
245 59 184

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.

 

 

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

PaulNewton
Shopify Partner
6274 572 1309

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

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


yingming
Tourist
4 0 2

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:

Video blank.jpg

 

Anyone knows how to fix this? Thanks!

Khaleed
Excursionist
29 0 5

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

ambrane
Visitor
2 0 0

how to make it on autoplay mode

ambrane
Visitor
2 0 0

how to make it autoplay mode.

Ekook
Excursionist
19 0 6

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
Shopify Partner
245 59 184

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!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

Ekook
Excursionist
19 0 6

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
Pathfinder
122 0 73

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>
Owner @ https://en.authentic.dk
Kenneth_Bon
Pathfinder
122 0 73

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.

Owner @ https://en.authentic.dk
Ekook
Excursionist
19 0 6

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
Excursionist
19 0 6

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
Excursionist
19 0 6

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
Shopify Partner
6274 572 1309

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

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


abdullah9041
Visitor
1 0 0

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

abdullah9041_0-1596567307627.png

 

iWoofu
Tourist
6 0 4

Works like a dream ... thank you so much

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

 

freda1
Visitor
2 0 0

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