How to autoplay video on product page on mobile - Dawn Theme

[VOLTA123]

Hi,

I have a video set as the second media item on my product page. On a laptop, the video autoplays when I navigate to it. However, on a mobile phone, it doesn't autoplay, and I would like to ensure that it does.

Could this be a configuration issue in the product-media.liquid file? I've checked the file, and it contains the following section:

Any assistance would be greatly appreciated.

Thank you!

[EcomGraduates]

The code in your product-media.liquid file looks like it should autoplay the video, but mobile browsers often block autoplay to save data and battery life. To ensure your video autoplays on mobile, you can add a few tweaks.

<template>
  {% case media.media_type %}
    {% when 'external_video' %}
      {% assign video_class = 'js-' | append: media.host %}
      {% if media.host == 'youtube' %}
        {{ media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: 'lazy', muted: true }}
      {% else %}
        {{ media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: 'lazy', muted: true }}
      {% endif %}
    {% when 'video' %}
      {{ media | media_tag: image_size: '2048x', autoplay: true, loop: loop, controls: true, preload: 'none', muted: true }}
    {% when 'model' %}
      {{ media | media_tag: image_size: '2048x', toggleable: true }}
  {% endcase %}
</template>

Notice the addition of muted: true to the autoplay configuration. Mobile browsers often require videos to be muted to allow autoplay. This tweak should help the video to start playing automatically on mobile devices.