How can I make the video autoplay on product page dawn theme?

[Sophie5]

Hello, I want to makethe product page video to play automatically on mobile and desktop, but I have tried many ways and none of them work. Can anyone help me find a solution? Thank you very much.

URL：www.hetkiwatches.com

[rajweb]

Hey @Sophie5 ,

To enable autoplay for videos on both mobile and desktop, you can try the following approach. Ensure your video tag has the autoplay, muted, and  playsinline attributes, which are necessary for autoplay to work across all devices, especially on mobile. Here’s a code example that may help:

<div class="video-container">
  <video
    autoplay
    muted
    playsinline
    loop
    src="https://hetkiwatches.com/path-to-your-video.mp4"
    width="100%"
    height="auto"
  >
    Your browser does not support the video tag.
  </video>
</div>

Explanation of Key Attributes:

- autoplay: Starts the video automatically.

-muted: Many browsers require videos to be muted to allow autoplay.

- playsinline: Ensures the video plays within the webpage on mobile, avoiding full-screen playback.

Troubleshooting:

If this setup doesn't work, check your browser settings, or try adding JavaScript to trigger play:

document.addEventListener("DOMContentLoaded", function() {
  const video = document.querySelector("video");
  video.muted = true; // Ensures autoplay compliance
  video.play().catch(error => {
    console.log("Autoplay prevented: ", error);
  });
});

Let me know if this helps or if you encounter any issues!

If I was able to help you, please don't forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma

[Sophie5]

Thanks for your answer, but I don't know how to modify the code. Could you clarify it in detail?

[rajweb]

Certainly! Let’s go through each step so you can add the autoplay functionality to your video.

1. Find Your Video Code:

-In your Shopify theme, go to Online Stores > Themes > Edit Code. Here, you’ll look for the file where the video is embedded. It might be in a template like  product.liquid, product-template.liquid, or in a section or snippet if your theme is more modular (for example,  section/product-template.liquid or snippet/vedio.liquid.

2. Update the Video Code:

Once you find the video code, modify it to include the autiplay, muted, playsinline and loop attributes. Here’s how it should look:

<video
  autoplay
  muted
  playsinline
  loop
  src="https://hetkiwatches.com/path-to-your-video.mp4"
  width="100%"
  height="auto"
>
  Your browser does not support the video tag.
</video>

Breakdown of Attributes:

1. autoplay: Tells the browser to start playing the video automatically.

2. muted: Mutes the video to comply with browser autoplay rules.

3. playsinline: Ensures the video plays inline within the webpage (doesn't go full-screen on mobile).

4. loop: Makes the video repeat after finishing.

3.  Add JavaScript (if Autoplay Doesn’t Work):

Some browsers require a small JavaScript snippet to get autoplay to work. You can add this code to your theme’s JavaScript file, typically in theme.js or a file referenced in your theme.liquid file.

Here’s the Javascript:

document.addEventListener("DOMContentLoaded", function() {
  const video = document.querySelector("video"); // Finds the first video element
  video.muted = true; // Ensures the video is muted for autoplay
  video.play().catch(error => {
    console.log("Autoplay prevented: ", error);
  });
});

Summary:

1. Add the video attributes in your HTML: autoplay, muted, playsinline,loop.

2. Optional javascript: If autoplay doesn’t work with just the attributes, add the JavaScript snippet to your theme’s JavaScript file.

Let me know if you’d like guidance on any specific part of this process!

If I was able to help you, please don't forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma