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

Solved
Highlighted
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

1 Like
Highlighted
Shopify Partner
242 59 104

This is an accepted solution.

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!

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

8 Likes
Highlighted
Shopify Partner
1 0 0
Hi Brian, does this solution work for adding your own video to homepage?
0 Likes
Highlighted
Shopify Partner
242 59 104

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.

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

0 Likes
Highlighted
New Member
2 0 2

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.

 

 

1 Like
Highlighted
New Member
1 0 0

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? 

0 Likes
Highlighted
Shopify Partner
242 59 104

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!

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

0 Likes
Highlighted
New Member
1 0 1

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!


 

1 Like
Highlighted
New Member
2 0 0

@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

0 Likes
Highlighted
New Member
1 0 2

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.

2 Likes