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

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

james0786
Visitor
2 0 7

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 118 (118)

iWoofu
Tourist
6 0 4

Works like a dream ... thank you so much

... and if video is not in mp4 format.. you can use cloudconvert.com

 

freda1
Visitor
2 0 0

Hi , can you expantiate on step 2 if possible can you add picture, where do i find the html 

Arbaz1
Visitor
1 0 0

I have followed your steps, now my video is in the product description but it isn't playing. So what could be the reason ?

amnonkappa
Visitor
1 0 0

Hello , can't follow the instructions till the end. can't find the place to copy the video url

Amnon

Dave1944
Visitor
1 0 0

Hi Guys, does the video appear as part of the Product Description for you or does it become part of the gallery? In my case its adding to the description and I guess it would be the  same for you. If any one knows how to make the vid a part of the Media Gallery that would be nice. thanks

Jarv
New Member
4 0 0

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

Tondamir
Visitor
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__
Visitor
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
358 1 99

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>

filmmaker123456
Visitor
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?

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?

RezDesigns
Shopify Partner
2 0 0

For anyone who needs to see an updated video tutorial on how to solve this problem, here is a beginner's guide to getting this done quickly.  Rather if its using Youtube or Natively.

https://youtu.be/EwFKRjxLUOo

Add Video to Shopify Page.png

eComInsider
Shopify Partner
166 16 38
<video muted="" controls="" autoplay="" style="max-width: 100%; height: auto;">
  <source src="enter url of your shopify store video">
Your browser does not support our video.
</source></video>

➡️ Exclusive offer - Shopify Trial 3 Months for $1/Month


➡️ Shopify Blogs (Q&A)

➡️ Your;Coffee Tip: my code = a perfect blend!

Growthfamily
Shopify Partner
33 1 4

Hello James, 

 

Although this might not directly answer your question, I believe it could be beneficial to others following this discussion.

 

For those looking to integrate videos in a Story format, I'd like to introduce my Shopify app: "My Stories".

 

Growthfamily_0-1702475673562.png

 

Regards, 

Discover My Stories: Embed social-style video stories on product pages

If you find my reply helpful, please hit Like and Mark as Solution

onescales
Shopify Partner
98 3 17

some themes support this. go to theme editor (customize button), you will have a "section" called "video" in which you can select a video and then embed it in addition to the youtube video.

OneScales.com Teaches Shopify and Solves Ecommerce Problems for Free. See our Youtube Channel for Tutorials - https://www.youtube.com/@onescales
We Also Share Insight about E-commerce, Web, Tech, AI, Analytics, SEO, PPC, Marketing and More.

LUISMO
Visitor
3 0 0

Hello ; just curious if anyone is still looking for a solution.

I have found one that works for me. Having used the tips mentioned here before all you need is to add up a few more things.

on your theme embed the following this will auto play the video.

 

<video controls="controls" style="max-width: 100%; height: auto;" autoplay="true" muted="true" loop="true" >
<source src="your URL here" type="video/mp4" />
Almost there.
</video>

this can be embeded either as rich text new block "HTML" or in a "custom.liquid" new block if your theme allows it.

hope this helps anyone.

regards

LM.

swastikumar
New Member
4 0 0

try this :

<video autoplay loop muted playsinline preload="auto" style="max-width: 100%; height: auto;">
  <source src="your_url_goes_here" type="video/mp4" />
  Your browser does not support our video.
</video>

<style>
  video::-webkit-media-controls {
    display: none !important;
  }
  video::-webkit-media-controls-enclosure {
    display: none !important;
  }
  video::-webkit-media-controls-panel {
    display: none !important;
  }
  video::-webkit-media-controls-play-button {
    display: none !important;
  }
  video::-webkit-media-controls-start-playback-button {
    display: none !important;
  }
  video::-webkit-media-controls-timeline {
    display: none !important;
  }
  video::-webkit-media-controls-current-time-display {
    display: none !important;
  }
  video::-webkit-media-controls-time-remaining-display {
    display: none !important;
  }
  video::-webkit-media-controls-mute-button {
    display: none !important;
  }
  video::-webkit-media-controls-volume-slider {
    display: none !important;
  }
  video::-webkit-media-controls-fullscreen-button {
    display: none !important;
  }
</style>

 


@james0786 wrote:

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


 

swastikumar
New Member
4 0 0

or try this 

 

 

<video id="myVideo" loop muted playsinline preload="auto" style="max-width: 100%; height: auto;">
<source src="your_url_goes_here" type="video/mp4" />
Your browser does not support our video.
</video>

<style>
video::-webkit-media-controls {
display: none !important;
}
video::-webkit-media-controls-enclosure {
display: none !important;
}
video::-webkit-media-controls-panel {
display: none !important;
}
video::-webkit-media-controls-play-button {
display: none !important;
}
video::-webkit-media-controls-start-playback-button {
display: none !important;
}
video::-webkit-media-controls-timeline {
display: none !important;
}
video::-webkit-media-controls-current-time-display {
display: none !important;
}
video::-webkit-media-controls-time-remaining-display {
display: none !important;
}
video::-webkit-media-controls-mute-button {
display: none !important;
}
video::-webkit-media-controls-volume-slider {
display: none !important;
}
video::-webkit-media-controls-fullscreen-button {
display: none !important;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
const video = document.getElementById("myVideo");

const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
video.play();
} else {
video.pause();
}
});
});

observer.observe(video);
});
</script>