All things Shopify and commerce
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
Works like a dream ... thank you so much
... and if video is not in mp4 format.. you can use cloudconvert.com
Hi , can you expantiate on step 2 if possible can you add picture, where do i find the html
I have followed your steps, now my video is in the product description but it isn't playing. So what could be the reason ?
Hello , can't follow the instructions till the end. can't find the place to copy the video url
Amnon
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
Does this work if I add the code to the Image Alt text in Debutify theme ?
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!
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??
Hi Brian,
is there a way to play the video in a loop and without having to press play?
thank you.
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>
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?
Hey dear,
this is my solution I can not play my video what is the problem?
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.
<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>
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,
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.
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.
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
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>
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024