Personalized checkout and custom promotions with Shopify Scripts
Please advise. I am using Automatic video playback in the description on the product page. The video plays automatically, everything is fine, but when I select any product option the automatic video playback stops. How to fix this? Here is the code I am using:
<style>
video {
width: 90%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/dabc40ffed1141b3a115883ac8fbe7ad.mp4"
type="video/mp4">
<source src="https://cdn.shopify.com/videos/c/o/v/dabc40ffed1141b3a115883ac8fbe7ad.mp4"
type="video/mp4">
</video>
Hi Demandphonecase, can you provide your store url so I can get a context on the problem, it seems that when the product option is selected an ajax request is send making a partial reload causing the loop option to reset.
Please take a look. Thank you.
https://demandcase.com/products/customized-bare-18406
Yeah, when option is selected a partial reload is happening and the loop option is interrupted.
one way to solve this is to listen to all select elements and when a change occur we play the video, I do not have access to the theme code so I will try my best here :
document.addEventListener('DOMContentLoaded', function () {
let selectElements = document.querySelectorAll(".select__select");
//Make sure to add productVideo id to the video element.
let video = document.getElementById("productVideo");
selectElements.forEach(input => {
input.addEventListener('change', () => {
video.play();
});
});
});
Can you please tell me, do I have to paste this code into some file? Or replace a certain code in some file?
You need to paste it, and if you can send a screenshot of the code file so I can help you further if you facing any problems adding the code.
What kind of screenshot file do you need?
I added the code through Custom Liquid
I meant the theme code files that is responsible for adding the video, the screenshot you provided need some changes:
<style>
video {
width: 90%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video id ="productVideo" muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/dabc40ffed1141b3a115883ac8fbe7ad.mp4"
type="video/mp4">
<source src="https://cdn.shopify.com/videos/c/o/v/dabc40ffed1141b3a115883ac8fbe7ad.mp4"
type="video/mp4">
</video>
document.addEventListener('DOMContentLoaded', function () { let selectElements = document.querySelectorAll(".select__select");
let video = document.getElementById("productVideo"); selectElements.forEach(input => { input.addEventListener('change', () => { video.play(); }); }); });
try to add this to custom liquid block , save and reload and see if the problem is solved.
The added code appeared below the video
Sorry, there was a typo mistake :
<style>
video {
width: 90%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video id ="productVideo" muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/dabc40ffed1141b3a115883ac8fbe7ad.mp4"
type="video/mp4">
<source src="https://cdn.shopify.com/videos/c/o/v/dabc40ffed1141b3a115883ac8fbe7ad.mp4"
type="video/mp4">
</video>
<script>
document.addEventListener('DOMContentLoaded', function () { let selectElements = document.querySelectorAll(".select__select");
let video = document.getElementById("productVideo"); selectElements.forEach(input => { input.addEventListener('change', () => { video.play(); }); }); });
</script>
it is the same code but we wrap javascript code with a script tag.
Unfortunately, the video still does not play automatically after adding this code after selecting any of the product options. Just freezes((((
Can I send you an access request, that way it will be more Convenient, I will take care of adding the code and test it.
Yes, of course. I'll wait to add access. Thank you.
Hi Demandphoncase, preview your theme from here : https://demandphonecase.myshopify.com/?preview_theme_id=137608986846
Do you have any notes before pushing the changes to the live theme?,
what I did is instead of custom liquid I added a new section with the same styling and changed the javascript code, and you can add this section to any part of your theme.
I copied my theme before this.
What is the name of the section you added?
And I take it in the new section you added you can insert videos?
I created a new copy to work on the section,the name of the section is video-2,
I can add a setting that allow you to add videos.
Add it, please. Let's see if it's what it's supposed to be.
okay, go to the latest copy of Dawn that was added and customized you will see the video-2 section have an input where you can enter any url of video and it will display.
Now should I try to publish the latest copy to fully test it? And keep that copy as the main copy, right?
Yeah, publish the latest copy to become the live theme.
Thank you very much. You've been very helpful. I'm very lucky to have you. Thank you again and good luck with everything.
Glad I helped, If you need help in the future , just contact me through my E-mail.
Thank you so much again!
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024