Automatically launch videos in the description on the product page

demandphonecase
Tourist
14 0 0

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>

Replies 22 (22)

Abdosamer
Shopify Partner
821 146 165

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.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
demandphonecase
Tourist
14 0 0
Abdosamer
Shopify Partner
821 146 165

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



Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
demandphonecase
Tourist
14 0 0

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

Abdosamer
Shopify Partner
821 146 165

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.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
demandphonecase
Tourist
14 0 0

What kind of screenshot file do you need?

I added the code through Custom Liquid

Screenshot_18.png

Abdosamer
Shopify Partner
821 146 165

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. 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
demandphonecase
Tourist
14 0 0

The added code appeared below the video

Screenshot_11.png

Abdosamer
Shopify Partner
821 146 165

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. 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
demandphonecase
Tourist
14 0 0

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

Abdosamer
Shopify Partner
821 146 165

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.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
demandphonecase
Tourist
14 0 0

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

Abdosamer
Shopify Partner
821 146 165

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.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
demandphonecase
Tourist
14 0 0

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
Shopify Partner
821 146 165

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.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
demandphonecase
Tourist
14 0 0

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

Abdosamer
Shopify Partner
821 146 165

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.

Abdosamer_0-1699399104073.png

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
demandphonecase
Tourist
14 0 0

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

Abdosamer
Shopify Partner
821 146 165

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
demandphonecase
Tourist
14 0 0

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
Shopify Partner
821 146 165

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
demandphonecase
Tourist
14 0 0

Thank you so much again!