Broadcast theme - autoplay product video

[OmerDaniel]

Hello,

I want to enable autoplay video on my product page, but I can't make it work.

I've added (muted: true, autoplay: true, loop: enable_video_looping, controls: false, preload: 'auto')

And still it won't work,

I tried to change in the theme.dev.js file this line:

document.querySelectorAll('video').forEach((video) => video.pause());

to >>

document.querySelectorAll('video').forEach((video) => video.play());

Any other ideas?

Thank you!

This is my website, and you can find a video example at this URL:

https://nerostudio.co.il/products/%D7%A6%D7%9E%D7%99%D7%93-orca

[Shadab_dev]

Can you send the video tag from inside the code editor

[OmerDaniel]

@Shadab_dev Sure, here it is

echo media | media_tag: image_size: image_size, class: 'media-video', muted: true, autoplay: true, loop: enable_video_looping, controls: false, preload: 'auto'

 

[Shadab_dev]

i see two videos, one is amongst the thumbnails and the other down below. The thumbnail one does autoplay

Also can we not use a video tag in case of video?

[OmerDaniel]

@Shadab_dev The other one is for external video like YouTube link.

how can I not use a video tag?

[Shadab_dev]

Can you please you take a screenshot of the video which is not auto playing from the link you provided.

Thanks

[OmerDaniel]

Sure,

thank you very much!

this is the last image in the carousel.

(video) @Shadab_dev 

 

[Shadab_dev]

I see. i got confused because it does work on the desktop version. i mean the video is autoplaying

[OmerDaniel]

@Shadab_dev Yes, I need to fix it only for mobile 

[Shadab_dev]

One last thing man, just give me the entire code on that file, like all the schema settings and everything

Thanks

[OmerDaniel]

@Shadab_dev Here you go,

This is the media.liquid file

https://hastebin.com/share/usucasisej.kotlin

Thanks!

[Shadab_dev]

Hey Omar, Have you tried adding playsinline attribute. If not please try adding this to check. Also Can you like aend me the schema for this section of yours, i believe i could learn a thing or two from this. playsinline: true

[OmerDaniel]

@Shadab_dev Hi,

Yes, I tried to add playsinline but it still doesn't work 😕

[Shadab_dev]

Sorry man. I did a bit of research and playsinline was the only possible solution showing up.

[Shadab_dev]

Hey @OmerDaniel tried a bit from Jamie's solution. Try adding this code. The code inside the script only runs for mobile devices and you will not have problem of video not autoplaying on desktop.

<script>
document.addEventListener('DOMContentLoaded', function() {
// Check if the device is mobile
if (window.matchMedia("(max-width: 749px)").matches) {
// Select the button by class name or data attribute
const mediaPosterButton = document.querySelector('.deferred-media__poster');

// Simulate a click on the button if it exists
if (mediaPosterButton) {
mediaPosterButton.click();
}
}
});
</script>

Hope this goes well.

Thanks

[JamieSouth · Accepted solution]

I’m working on this at the minute, I’ll keep you updated if I find a way to get the video to play. I’ve got a workaround but it’s not very elegant. You can include the following code inside a custom code block in the product form on the product page.

<script>
document.addEventListener('DOMContentLoaded', function() {
// Select the button by class name or data attribute
const mediaPosterButton = document.querySelector('.deferred-media__poster');

// Simulate a click on the button if it exists
if (mediaPosterButton) {
mediaPosterButton.click();
}
});

</script>

[Shadab_dev]

This could be a good one actually nothing too hefty that would slow down the site or something. I agree not that elegant but could prove efficient.

[OmerDaniel]

@JamieSouth Thank you so much!

It worked 🙂

[JamieSouth]

You’re welcome. Your site looks great, good work 👌🏻

I think there may be a bit of an issue with this on desktop, depending on which view you have for the product images. Keep an eye on it.

[OmerDaniel]

@JamieSouth Thank you very much!

Yes, I saw that on my desktop the video will not play at all.

Let me know if you open for some work, I want to customize a bit my website 🙂

[Nailtheland]

Hi there, I have the same problem. I tried your code on custom liquid and it worked on desktop but not on mobile. Can you please advise? Thanks.

[Shadab_dev]

Hey @Nailtheland I think if you add pretty much the same code with the video muted, i believe it will autoplay on mobile. I am not sure but i read somewhere that to make video autoplay on mobile it should be muted first.

[Nailtheland]

Thanks for your reply Shadab, I tried to upload muted video but still it is not able to autoplay on mobile.

[Shadab_dev]

No actually you will need to add a bit of js for mobile devices and mute it from there and play the video. 

If you were using a free theme I would have tried it on my dev store but to check on the broadcast theme I will need collaborator access to the site.