How To Embed a Video On Your Shopify Product & Home Page
Вставка
- Опубліковано 25 сер 2024
- This is not embedding a UA-cam video onto your site. This tutorial will show you how to upload a file to your backend shopify store and then embed that code into HTML so you may freely add your video file anywhere on your shopify store!
Let an automated service find the hottest new product you can start selling RIGHT NOW: bit.ly/2M603fJ
Base HTML Code:
video controls="controls" style="max-width: 100%; height: auto;"
source src="your url here" type="video/mp4"
Your browser does not support our video.
/source/video
Please reference video for bracket locations in front and in between text as youtube will not allow me to post a bracket in description. The brackets are referenced as "greater than, less than" symbols and you should be able to see the difference and where they belong by comparing the above code to the code pictured in the video.
Let an automated service find the hottest new product you can start selling RIGHT NOW: bit.ly/2M603fJ
Oh em geee! You are wonderful. I did this while listening to your video. I had to keep pausing and rewinding, but you definitely helped me out! I watched a video prior to this one and it did not help me at all. Thank you so much for this accurate and precise video.
Thank you for watching!
Hi! I can't find "custom html" when i click on "add section" how can i change that?
You have to add "custom content" first, then "add content", then "custom html"
Hi. Thanks for this amazing video. However, I couldn't get it to run. I show a darkened video box but it doesn't play and you can't click on the play. Any help would be greatly appreciated. I believe I added the brackets in the right place.
Same here!
Thank you so much! This was so valuable, I've been looking how to do this for a while and your code worked just perfectly. Thanks again for sharing.
So what you missed was telling people there is a 20MB limit for using MP4 files via this method.
I just got off a call with Shopify about that issue. So yeah, your videos can’t be over 20MB to use this method.
For products it will let you upload larger videos.
this is GOLD!! About to switch to Shopify and this solves so many issues. thank YOU!
Super happy to help!
Ohhh man this video deserves million views and likes! Thank you so much!
Hi mate ! I followed all the steps to your video and when i went to paste the HTML code into the add section, the HTML code just displayed on my website and not the video? Just wondering if you could possibly help? Thanks
You have to add the brackets
@@sweetsadii i did but still just shows the code?
@@dlovan359 hmm idk what else it could be
When I add the custom html in there, the video pops up and looks great but after 5 seconds my html erases automatically! What am I doing wrong?
This guy is the GOAT, if you want to understand it is now called 'Custom Liquid'
did it work for you?
This was extremely helpful. Thank you so much for sharing your knowledge and skills!
Glad it was helpful!
i cant find the description to copy it
@@irenesc90 video controls="controls" style="max-width: 100%; height: auto;"
source src="your url here" type="video/mp4"
Your browser does not support our video.
/source/video\
for me i dont have the option of custom HTML only custom content
Hi there, I was able to upload the video, video is visible in the description but the text description is not visible. Please guide...Thanks
This started out great but it doesn't state how to get to the codes page. Yada Yada Yada. Very confusing.
it doesnt work anymore....???? i used ur code i copied pasted the link in the section you say to paste it and it just dont works...appears like a document as it is...what am i missing?
same
Thank you Hustle for sharing useful stuff and a good forum. It helped me my purpose.
thanks for the help mate! do you know if theres anyway to make it play in auto when someone just open the website? thanks
@Hustle Millenial bruh even my 2yo knows u r a scammer
What’s odd is that.. when I go to settings, I don’t have an option for files.
Hi, @Hustle Millennial, could you please give me the proper description? I have tried doing it as you advised but still can’t get it right. Seems like I’m making some mistakes with the brackets
Appreciate the tip bro! Really helps and it 100% works
Happy to help!
Thank you
You're welcome
The "CUSTOM HTML" doesn't appear on my shopify. Instead I have "CUSTOM CONTENT" which doesn't me to input any code :/
same here :/
Thank you so much, this video was great I have just a quick question , my video will show blank until you hit play, anyway i could add a preview of the video so it doesn’t look blank before they hit play? Thanks
This is my issue also, wondering if you found a solution?
When I do the same steps it is not showing the video. Please help
cool! thanks! how can i make it start without clicking?
Great video thanks for this.
I have a question about thumbnails of the video?
Is it possible to change or there'll be a default one
i think this method is outdated, i dont see a link when i upload video it only says copy link
Worked perfectly. Thank you
Glad it helped
THANK YOU. Now I need to find out how to center it lol.
Try tweaking the max width value!
cant thank you enough . seriously saved me!!
I’m glad I could help man!
This helped me a lot! Thanks
You're the man
please help me any one..
i have added the vedio but its not playing..whta is the problem please
nice clean video bro. Thanks
Is there a way to add Auto play and also have it continuously loop? Thanks for the video.
Look at the code he gave you, and now just simply type in these words between the top line of the code where you see the word video and controls.
So it will look like this video autoplay muted loop controls=
Remember to add the brackets.
Anyway, that simple insert in between those two (2) words should help solve 100% of your problems.
Hello! I've added the words in between but it doesnt auto?? Can you help?
using this code, what do I need to add to get the video to autoplay, without any controls, loop and mute the video? I agree by the way about this being the best way to insert video.
Thank you for this video. Helped me a lot!
Happy to help!
Thank you so much ! Really helps me recude site delay instead of high file size Gif's. For everyone with the same problem. Make Gif's - Convert Gif to MP4 - Upload this MP4
Will speed up ur site
Is it possible to have these videos start automatically? Like it really looks like a GIF
Thanks!
did you find the way?
yes pls respond if you found out how
Awesome info mate thank you heaps
thanks was going great but i just end up with a black video box no video, not sure what im doing wrong
my theme doesnt have a custom html section I am so lost
Thank you alot, it worked for me.
thank you!
Thank you! One question, we have successfully embedded the video however on a phone the dimensions are off - how can we resize? thanks in advance
It didn't work for me!
Hey where did the box to even edit come from?
I know,where
It worked. Is there code to remove the download icon on the bottom right.
I got it to work and autoplay by inserting this code:
and if you can't find how to add the html simply go to: add a section. then click custom content, then once you have added it go back to where it shows you all your section then go to the custom content section and it will show you 3 features underneath click on " add a block" then it will take you to all the blocks that are available and there you will find the custom html tab. hope this helps!
Thank you melly and it helped me this tip.
PROPER CODE:
Thank you and one question, I wanna add auto play to this link how would I do that?
I'm getting the error saying " exceeds the limit of file size"?
Same
This is very helpful. Thanks! Is there a way to reduce the screen size?
Awesome, Thank you so much I just used. Thanks again,
Happy to help!
Is it only the 2.0 theme have it? cause my custom content doesn't have custom html even if i hit add a block in the section. Love the video tho. Wish it worked for me.
Thanks. But where is the code for me to copy, insert my vid, and then paste as instructed?
@Hustle Millennial do you know how long the video can be? Or if there is a resolution cap? I have a 44 second video that was recorded in 1080p and I am unable to save the video. I also have a second video that is 2 minutes and 10 seconds long, and of coarse that one isn't loading onto the image section in Shopify either.
super great video ! i still cant seem to get it tho i followed him step by step and i still cant get it yet hate to be the slow learner out the bunch
Make sure your code includes what I posted in the video description
i really do appreciate the reply back !! i still cant get it to work i dont know if it matters what theme you have but ill keep trying before i hire someone to do it for me
Maybe I’m missing something? When I click add section, it doesn’t say custom html. So I get stuck right there
is there any way to add the video on product images so that people can watch the video without clicking on the product like aliexpress
I love this video thank you
Happy to help!
Really great video men
Thank You!
Happy to help!
I've been trying to embed a video on my site. I added the brackets and everything. The video shows up on the page but nothing plays, it's just black. Can you pleassssseeeee help??
i have this same problem please could you help, this is the last part of setting up my store
can you do an update video because it's blury on this video.
This didn’t work for me. Under “add a section” there is no longer an option to add html.
i cant upload mp4 file
Hey, great video. Helped me a lot. Is it also possbile to make the video auto play (like a gif essentially)? If so, do you know how?
did you figure the autoplay out??
@@Piscitani hello, how do we add autoplay?
For some reason, I downloaded this file and the "URL" section never came up, just the option to copy the link. Is it because I created the Mp4 myself? I did it on canva. Now when I post the code, it only shows it word for word and not the actual video.
Hey man - when viewing on Desktop, my video is to the left instead of centered?
how would I change the size of the video in Shopify and how would I mute the video?
I got an error saying the video needs to between 100:1 and 1:100. How do I fix this?
change to mp4 :)
Hi friend... I was wondering how to add auto music to my Home Screen in Shopify, couldn't find any tutorial. Here you show only mp4, not mp3. Can you help please? I saw tons of videos how to add an MP3 player, but this is not what I'm looking for. I don't want customers to hit play to hear music, just volume button. Is this possible?Thanks
Perfect, Thanks!
Glad it helped!
At my section it turns out as just the html But you Cant See the Video. It isnt shown
How do I center the video? The code works for me but the video is on the right, rather than being in the middle of the page.
Anyone able to help?
THE CODE IS NOT WORK FOR ME
Very helpful! Finally I was able to embed my video! Thank you!!
Very happy to help!
I gave a like. Super helpful! Could you tell us how to remove the controls, and have the video automatically play upon scrolling up to it. Example; what i want is to have my video at the very top of my website and when users come to my page, the video is just there already playing in loop. No need to click play pause play click click
Hi - did you find out how to do this?
I am interested in the same thing!
@@mimigodel no sorry :/ maybe someone has answered it on the shopify forums community
Great content thank youuu
Happy to help!
It's not working for me :( I've used brackets and still not working. Can you please help me out? I'm using the Debut Theme on Shopify. Thanks!!
Send me your line of code on Instagram @Hustle_Millennial
@@HustleMillennial sure i'll do it now, thanks!!
@@HustleMillennial Hi, I am using the Debit theme as well, everything works except when I go to save, the code always erases..what I am missing? Thanks!
Help me out too @@HustleMillennial
Hi, how can i center the video in the page? I have put align=center but doesn t go. Thk
Now how to get it to "autoplay", that would be great... any tips?
yes need this too
Look at the code he gave you, and now just simply type in these words between the top line of the code where you see the word video and controls.
So it will look like this video autoplay muted loop controls=
Remember to add the brackets.
Anyway, that simple insert in between those two (2) words should help solve 100% of your problems.
@@tariqmallay2037 every time I try to upload the video from files I get this message "video_4001127808055.mp4" exceeds the 20MB file size" .. any help?
@@FlamboyantChamp I had the same issue, I edited a video on iMovie and saved it at 720p and it exceeded 20MB. I went back to iMovie and saved it again at 540p. Lowering the quality made it into 15MB. Hope that helped!
@@tariqmallay2037 okay this worked ! but only for the desktop. anyway to change it for mobile as well?
If I'm trying to insert gif instead is their anything I need to change in the HTML code?
Very useful video. Anybody knows how to enable autoplay and loop though?
Is there a way to do this with the debut theme? I don't have the Custom HTML. Thanks.
Dude, click add sections and then add custom content and then you will see custom html.
@@tariqmallay2037 Thanks for the help, but there is no Custom HTML on debut theme. it only allows me to add only UA-cam or Vimeo links.
@@usgoodz917 did you find a solution by any chance ? ^^ I have the same problem with debut theme...
How do I give the video a thumbnail? Is it possible to make the video autoplay?
Thanks my guy
happy to help man!
Where can I find the first code that I have to paste the Shopify link in?
Hi, i got everything to work but it wont autoplay on Phone, is it possible to fix this?
is there a way that i can upload my video as MP4 but in trial version?
i have try doing it but it is not working for me, can you please help me
Can you do the same for images that have a large resolution? If yes, do you have the HTML code for that?
This only works if you use the windows notepad and Firefox, it’s not working because you’re using chrome most likely
Very weird! Worked on Chrome for me
Hustle Millennial Works on chrome if you’re using a Windows computer but not if you’re using Mac
@@Roudesianou ahh! That’s really good to know. Thank you!
hey do you know how to make it autoplay and loop ?
It’s says my files to big. How short does the video have to be?
Thank you very much!!! :)
You're welcome!
What theme are you using?
Do the video have to be posted on UA-cam to get the URL?
MY VIDEO POPS UP FOR LIKE 2 SECONDS, WHEN I ATTEMPT TO PRESS SAVE IT DISAPPEARS. A I DOING SOMETHING WRONG?
same thing is happening for mw
Look at my comment from above. Same thing was happening to me, but I got it to work.
Got it to work in firefox, but wouldn't work in chrome for some reason... Copied, pasted, and edited the code from above directly into the custom HTML box, rather than in a text edit file. Don't know why I had to do it that way, but I did, and it worked.
Hi!
This was amazing help, is there any way you can get it to autoplay?
Look at the code he gave you, and now just simply type in these words between the top line of the code where you see the word video and controls.
So it will look like this video autoplay muted loop controls=
Remember to add the brackets.
Anyway, that simple insert in between those two (2) words should help solve 100% of your problems.
@@tariqmallay2037 What 2 words am i adding?
@@blvtv3574
try copy and pasting that underneath your tag. So to directly answer your question, the two (2) words was video autoplay. so the syntax you're telling the video to autoplay, and play it in a loop and of course play it muted. Now as far as the controls syntax you should have been able to copy and paste that without a problem from this video. If you still have questions please let me know.
@@tariqmallay2037 Thanks so much! Do you know if there is a way to add a thumbnail?