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

james0786
New Member
2 0 2

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 101 (101)
jasonavada
Shopify Partner
332 11 40

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
New Member
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.

Kenz6900
New Member
1 0 0

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

TMills
New Member
1 0 1

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

dalochllc
New Member
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
New Member
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.

 

ElleRoshelle
New Member
1 0 0

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

PeterWong
New Member
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.



Tashtae
New Member
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.

Sneakermask
Excursionist
14 0 10

@PeterWong @

 

BrianAtWork
Shopify Partner
245 59 166

@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

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 166

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
4217 304 903

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

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
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!

ambrane
New Member
2 0 0

how to make it on autoplay mode

ambrane
New Member
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 166

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