FROM CACHE - en_header

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 103 (103)
Jarv
New Member
4 0 0

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

Tondamir
New Member
1 0 0

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
Tourist
8 0 3

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

Hi Brian,

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

thank you.

Smeelah
Navigator
306 1 85

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
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
306 1 85

Read the previous post lol

Fünf8
New Member
4 0 0

Bildschirmfoto 2021-01-05 um 19.00.07.png

Hey dear,

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

filmmaker123456
New Member
1 0 0

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

 

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?