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

[abdullah9041]

Hi,

I came across this solution of yours and decided to try it out since I was myself looking for such a solution.

However, the video doesn't appear on my relevant page and it also shows 'Your browser does not support our video" (see attached screenshot)
Any help regarding this would be highly appreciated.

Thanks

[iWoofu]

Works like a dream ... thank you so much

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

[freda1]

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

[Arbaz1]

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]

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

Amnon

[Dave1944]

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]

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>

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

[Fünf8]

Hey dear,

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

[RezDesigns]

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

[eComInsider]

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

[Growthfamily]

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

Regards, 

[onescales]

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.

[LUISMO]

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]

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]

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>