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 95 (95)
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!

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

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!

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?