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

[james0786]

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

[Jarv]

Does this work if I add the code to the Image Alt text in Debutify theme ?

[Tondamir]

Hello,

i just wanted to ask that i need to make video play regurarly without clicking on the play button if it's possible.
Thanks!

[CaffeVive]

WHY CAN'T WE JUST LINK TO SHOPIFY HOSTED VIDEOS?!?! Seems like this would be so much easier than writing code.. The video slide format is already in place on homescreen. WHy refuse shopify hosted videos? Why only FB, Vimeo??

[rupert__]

Hi Brian,

is there a way to play the video in a loop and without having to press play?

thank you.

[Smeelah]

After a few hours trying unsuccessfully to add the video to my product variant photos using that tutorial, I tried Brian's code and am very happy with the option. Thanks @BrianAtWork !

I made a some adjustments to remove the border, resize it and have it autoplay and loop:

<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 video file url here">
Your browser does not support our video.
</video></p>

[bhammond]

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]

Read the previous post lol

[Fünf8]

Hey dear,

this is my solution I can not play my video what is the problem?

[filmmaker123456]

This worked for me too and looks great, but I can't get it to autoplay on Mobile. Its just chosen the first frame as the thumbnail and that's it.

Anyone got any workaround to get it autoplaying on Mobile too?

[TroyNeally]

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

[jostho6213]

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]

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]

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]

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

[Takeoffscooters]

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]

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]

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]

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]

Ok let me upload and MP4 and give it a try.

[TroyNeally]

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?