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

james0786
New Member
2 0 4

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 104 (104)
BrianAtWork
Shopify Partner
245 59 172

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

TroyNeally
Tourist
7 0 0

I am also having this same problem.  When I load the MP4 into the product media area it doesn't show up.  I did do the work around but that is ok for now, just would like to be able to add more videos to my products.

 

Regards,

Troy N.

www.JustInCaseRescue.com
Info@justincaserescue.com

 

Takeoffscooters
New Member
2 0 2

Hi this method worked for me however, all of my mp4 files i add this way are missing thumbnails, the thumbnail is basically  a blank screen. i would love to add my own personalised thumbnail to these can you please advise? 

SarahS23
Tourist
5 0 1

We have the same issue! let us know if you found a solution for this. Much appreicated! 

Takeoffscooters
New Member
2 0 2
Hi, the solution I’ve used for now is at the end of your mp4 url add #t=1 . This will allow the videos thumbnail to display whatever is showing 1 second into the video rather than a blank screen however, the disadvantage of this way is, the video literally starts from whatever second you put after your #t=
Hope this helps
SarahS23
Tourist
5 0 1

Thanks so much for this!

We added that#t=1 and the modified code above by one of the members seems to autoplay on desktop but it still doesn' t autoplay on mobile.

<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_url_goes_here #t=1" />
Your browser does not support our video.
</video></p>

If you ever found a solution please let us know! 

TroyNeally
Tourist
7 0 0

How are you adding this.. what are the steps.  I tried to cut/paste the code, I even did ADD MEDIA and it still didnt work.  I am using the VENTURE theme.

 

<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="https://youtu.be/JYL8tfnstmE #t=1" /> Testing Video </video></p>

This is the code I used and it doesnt work.  What am I doing wrong?

SarahS23
Tourist
5 0 1

maybe it's because you are using a youtube link? Mine was a .mp4 file that was uploaded directly on Shopify in the "files" section. I then copied the link it provided and inserted in the code.

My knowledge is very limited in this area though! I am just following the above advises 🙂 

 

TroyNeally
Tourist
7 0 0
Ok let me upload and MP4 and give it a try.
TroyNeally
Tourist
7 0 0

Thanks for the help Sarah!  Are you adding this video to your product DESCRIPTION area or in the media area where the pictures of a product would go?

SarahS23
Tourist
5 0 1

No problem!

I'm inserting it in the description part of a page actually, not a product page. Does it work for you on the product page on mobile?

TroyNeally
Tourist
7 0 0

I haven't tried it on a mobile device yet.  But when I click on the "Add Video" button where you put your description, it works great.  Also works when you goto YOUTUBE and share a video and share it with EMBED Iframe URL code as well.  So if you wanted to show a video that you do not have uploaded, it works.

SarahS23
Tourist
5 0 1

Thanks so much for the below code Brian.

We tried it on another page and it worked too. The only thing is it does not autoplay, is there a way to do that? 

If not, how can we change the cover photo? Right now it just shows a white background with a play button and unless you click on the play, you just see white.

Would appreicate your help!

BonzaDogTreats
Shopify Partner
66 0 13

Hi Brian

 

I am trying to add a 3 second video to a product page. I've uploaded it to the files area, and it plays from there. 

I used the code you shared and put this in HTML with my image file name, but all I'm getting in my product page is a black screen. Can you tell me where I'm going wrong please?

 

Capturevideo.JPG

lullalevart
New Member
1 0 0

 

Hi there, I put the following code on the product page, but, appearing in black, the video not working? Did I miss up anything?

my mp4 url link = from setting-file-select file name-copy link

 

<video style="width: 100% !important; height: auto !important;" controls="controls" loop="loop"> 

<source src="my mp4 url link" type="video/mp4"></source></video>

 

upload video .jpg

Abundantia
New Member
4 0 0

This happened to me as well.  Once you click save and then preview, it will work properly.

ashleyw6
New Member
1 0 0

How to I make the video fit the screen on desktop mode? it's just small and to the left.

Abundantia
New Member
4 0 0

Thank you for the direction.  This worked for me, however, I didn't realize I shot the video in portrait rather than landscape.  It is now small with the black blocks on the side.  Is there a way to fix this orientation, or would you suggest I re-shoot the videos in Landscape (Clothing company btw)

MsSkeptical
Explorer
41 1 13

i think that would be the best course of action for that. 🙂

Dermapparence
Tourist
10 0 2

HI, do you have code for automatic play video?

hustlinmomma
New Member
1 0 0

This is difficult and not working for me i could use some help

Sensei
Shopify Partner
30 0 1

Well, there are a lot of Shopify apps that help you embed videos from YouTube, Vimeo, IGTV, and whatnot but a lot of them don’t have a feature where you can add videos of your own.

I was thinking of the same feature lately, I just shot a couple of product videos with a white backdrop and felt like it’s better to add these videos to my online store rather than social channels. The reason being, I wanted to create a sense of exclusivity when my visitor comes to my online store. I didn’t want them to see the same thing they saw on YouTube or Instagram.

But I was also wondering, what if adding videos to my online store will lower my page load speed? And reducing my online store’s loading speed is the last thing I would want to have.

There are a couple of apps that allow you to add videos of your own but they don’t have a feature that could help you with adding videos from channels like YouTube or Instagram.

And if you’re just starting out I am sure you wouldn’t want to have multiple apps just to add videos. 🙂

After hunting for the app that could help me add videos and asking my friends for it, I came across Videowise. It simply allows you to add your own video on the product/landing page, it fetches videos from YouTube, Instagram, TikTok and other channels.

It's quite simple to set up and allows you to add videos of your choice in just a few clicks. I am still on the FREE trial, but yeah this week I am planning to upgrade it to a paid version. I hope I don’t regret even a single penny spent on it lol.

Titanofficial
New Member
1 0 0

Hi Brian,

Are we able to upload videos greater than 20MB? We have videos larger in size and most around 30-40MB.

www.titanworld.com.au

Thanks

Kevin Shah

 

SkylerWu
New Member
1 0 0

Hi. Thanks for answer and it works well! I'd like to know if I could edit the code and make the video play automaticatily in my website?

OlivierPoisson
New Member
1 0 0

Hi, is there any way to customize the controls of the video ? Like autoplay and muted

adam70461
New Member
1 0 0

It worked! Very easy

Wardo
New Member
1 0 0

Hey! I used your link and worked great for single video. I ideally want to put 3 videos next to each other side by side. Any advice on how to achieve that? Thanks!

D_7
Tourist
3 0 4

Hi,
If my video file is too large for uploading directly into Shopfi, and I don't want to embed YouTybe - (as the video dimensions doesn't fit YouTube)
Can I somehow use DropBox or GoogleDrive to host and embed?
Thanks

IL2
New Member
1 0 0

Hi Brian!

Using your instructions, I have been able to add the video as part of the description of the product. Is there any way to add the video as "media"? So it will show just as the pictures from the product.

Thank you very much in advance!

Ines 

jasmin336
New Member
1 0 0

Hi BrianAtWork ... I have a video that I created and downloaded to my PC along with a thumbnail that I chose to upload for it in YouTube (having downloaded it again afterwards). I don't want to use the YouTube URL because it shows YouTube and my channel but I only want to use my own media for this. The video and thumbnail work great on desktop, but not on mobile. On mobile, all I have showing is the play button and a completely blank area for the video and that looks unprofessional. Is there any additional coding that I should include to make sure that the thumbnail is going to show up on mobile? If so, please share. Thanks in advance!

dievart
Tourist
9 0 2

how do you then center the video in your post?

Christian52
New Member
1 0 0

Hi, I used the exact same steps but the video shows up on my product page like this 

Christian52_0-1656844542904.png

How do I fix it? Can you help?

 

Expartdesigns
Shopify Partner
1 0 0
Hi Brian, does this solution work for adding your own video to homepage?
BrianAtWork
Shopify Partner
245 59 172

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

DKR
New Member
2 0 0

Hi @BrianAtWork

Thank you so much for sharing the idea. Post some more research came across a custom code that autoplays an mp4 (sharing that). Meanwhile I want to know what is a way to add a link on this (I want the customer to click this video on my website which would then take them to my blog or product ?)

<video autoplay="" loop="" muted="" playsinline="controls" style="max-width: 100%; height: auto;">
<source src="https://cdn.shopify.com/s/files/1/0444/3747/1382/files/final_5f20b04b314cd60015b546dd_522690.mp4?v=1..." type="video/mp4">
<img src="Pre.jpg">
</source></video>


Thank you so much!
D

PaulNewton
Shopify Partner
5189 464 1125

@DKR 

To have clickable links over a partial area on the video use an anchor tag <a href='shopify.com'></a> (or a button).

Then absolutely position it over the video so that the video controls are still useable.

<div class="video-container">
<video id="main-video" autoplay="" loop="" muted="" playsinline="controls" style="max-width: 100%; height: auto;">
<source src="" type="video/mp4">
<img src="Pre.jpg">
</source></video>
<a class="video-link" href="/collections">Shop</a>
<style>
.video-container { position: relative;}
.video-link { position: absolute; width: 50%, height: 50%; z-index: 2; }
</style>

 

To have an entire videos area a clickable link just wrap it with an <a> tag

Note: 💣 Accessibility issue - user controls play,pause,etc become unusable when making entire videos area clickable link. So IF users need the play/pause controls on a video DO NOT make the whole video a link , and DOUBLE DO NOT do this if there is audio. And ESPECIALLY DONT assume just because you are okay with this behavior that your customers will enjoy the lack of controls.

Though you may need to style, or reset styles, of <a> tags so they work and behave as needed when wrapped around large block content.

<a class="video-link" href="/collections">
<video id="main-video" autoplay="" loop="" muted="" playsinline="controls" style="max-width: 100%; height: auto;">
<source src="" type="video/mp4">
<img src="Pre.jpg">
</source></video>
</a>

Or use the onclick attribute or , create a click handler for a video that has it's ID attribute set

<script>    
   document.getElementById('main-video').addEventListener('click', function() {
       this.pause();
       window.location.href('/collections');
    });
</script>

 

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
DKR
New Member
2 0 0

@PaulNewton Wow, that was way simpler than i thought! Thanks so much... ps. Coffee on me as soon as get my first customer 🙂 

james0786
New Member
2 0 4

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.

 

 

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

BrianAtWork
Shopify Partner
245 59 172

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

DorisN10
New Member
1 0 0

Hi, how can the video just show up on its on and play on repeat without having to hit the play button? Thank you! 

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


 

TuJ
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

hayhamLT
New Member
2 0 1

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

TuJ
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

hayhamLT
New Member
2 0 1

I'm viewing it on iMac, Chrome browser

rdiddy14
New Member
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
New Member
1 0 1

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

MissN
New Member
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
New Member
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
323 1 90

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
New Member
2 0 0

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

 

Lisa1503
New Member
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
New Member
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
New Member
1 0 0

It worked .. Thank you very much 

PalmtreeChops
Excursionist
19 1 2

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

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.

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
New Member
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
New Member
1 0 0

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

Khaleed
Tourist
22 0 2

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

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



Sneakermask
Excursionist
14 0 10

@PeterWong @