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

Solved
Highlighted
Excursionist
18 1 0

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

0 Likes
Highlighted
New Member
2 0 0

even if I check "autoplay", it's not playing, you have to go and enable show controls and then hit the play button

0 Likes
Highlighted
New Member
2 0 0

Hi,

 

If you are viewing this on a mobile/tablet device that has 'low power mode' and this is enabled it will not autoplay as this feature is trying to save power usage and autoplaying a video will use a significant amount of power. Thus defeating the purpose of 'low power mode'

 

Thanks,

George

0 Likes
New Member
2 0 0

I'm viewing it on iMac, Chrome browser

0 Likes
Highlighted
New Member
1 0 0

It worked .. Thank you very much 

0 Likes