Automatically launch videos in the description on the product page

[demandphonecase]

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>

[Abdosamer]

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.

[demandphonecase]

Please take a look. Thank you.
https://demandcase.com/products/customized-bare-18406

[Abdosamer]

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();
        });
    });
});

[demandphonecase]

Can you please tell me, do I have to paste this code into some file? Or replace a certain code in some file?

[Abdosamer]

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.

[demandphonecase]

What kind of screenshot file do you need?

I added the code through Custom Liquid

 

[Abdosamer]

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. 

[demandphonecase]

The added code appeared below the video

 

[Abdosamer]

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. 

[demandphonecase]

Unfortunately, the video still does not play automatically after adding this code after selecting any of the product options. Just freezes((((

[Abdosamer]

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.

[demandphonecase]

Yes, of course. I'll wait to add access. Thank you.

[Abdosamer]

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.

[demandphonecase]

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?

[Abdosamer]

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.

[demandphonecase]

Add it, please. Let's see if it's what it's supposed to be.

[Abdosamer]

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.

[demandphonecase]

Now should I try to publish the latest copy to fully test it? And keep that copy as the main copy, right?

[Abdosamer]

Yeah, publish the latest copy to become the live theme.

[demandphonecase]

Thank you very much. You've been very helpful. I'm very lucky to have you. Thank you again and good luck with everything.

[Abdosamer]

Glad I helped, If you need help in the future , just contact me through my E-mail.

[demandphonecase]

Thank you so much again!