How can I keep the autoplay feature for videos on mobile with the Dawn theme?

[Amidee]

Hello,

my store is https://7colors-8972.myshopify.com/

I wanted an autoplaying video for my featured product. I see from the forums this is an ongoing problem (and I think Shopify should definitely address this once and for all in the theme options).

To achieve it I found this solutions in another thread – I added 

<script>
window.addEventListener('DOMContentLoaded',(event)=>{
document.querySelectorAll('.deferred-media__poster-button.motion-reduce')[0].click()
});
</script>

at the end of theme.liquid and it works perfectly. Genius – if you're required a click to make the video start, just emulate the click. Love it.

Unfortunately on mobile resolutions (<750px width) the responsive theme just puts an image preview and clicking it opens a lightbox with the video in it. Not exactly a good mobile experience.

How do I preserve the featured product preview block so that it keeps on being a video and not just a preview that opens a lightbox? I've been a developer for many years and the css/liquid structure is so dense I can't figure it out after many hours of staring at the code. 

[Amidee · Accepted solution]

To whoever needs this in the future. It's not perfect but.
section-main-product.css , there is 

.product-media-modal__content > *:not(.active), .product__media-list .deferred-media { display: none; }

commenting this out will solve the problem, but will prevent all deferred media to not get loaded until shown, so it's a hit on bandwidth and also slightly screws up the gallery.

then you can add

.product__media-toggle, .product__media-icon { display: none; }

to your custom css to remove the play icon.

[BlackUmbrella]

@Amidee,

This is what worked for me.

1. Create a backup:

• Go to Online Store > Themes > Edit Code
• Navigate to Snippets folder
• Click "+ Add a new snippet"
• Name it product-thumbnail-backup.liquid
• Copy ALL content from product-thumbnail.liquid
• Paste into the new backup file
• Save the backup file

2. Update the original file:

• Go back to `product-thumbnail.liquid`
• Replace all content with the new code
• Save changes

3. Add required CSS:

• Open Sections folder
• Find `main-product.liquid` or `base.css'.
• Add the new styles at the top of the file or if using `base.css', bottom, without style tags.
  
• Save changes

4. If anything goes wrong:

• Simply copy content from `product-thumbnail-backup.liquid`
• Paste back into `product-thumbnail.liquid`
• Save to restore previous version

main-product.liquid

<style>
@media screen and (min-width: 750px) {
  .mobile-only-video {
    display: none;
  }
}
</style>

product-thumbnail.liquid

{%- liquid
  unless lazy_load == false
    assign lazy = 'lazy'
  endunless

  assign desktop_columns = 1
  if desktop_layout == 'columns' and media_count > 1
    assign desktop_columns = 2
  endif

  assign mobile_columns = 1
  if mobile_layout == 'columns' and media_count > 1
    assign mobile_columns = 2
  endif

  if media.media_type == 'image'
    assign image_class = 'image-magnify-' | append: section.settings.image_zoom
  endif
-%}

{%- capture sizes -%}
  (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | divided_by: desktop_columns | round }}px, (min-width: 990px) calc({{ media_width | times: 100 | divided_by: desktop_columns }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / {{ mobile_columns }} - 4rem)
{%- endcapture -%}

<div
  class="product-media-container media-type-{{ media.media_type }} media-fit-{{ media_fit }} global-media-settings gradient{% if constrain_to_viewport %} constrain-height{% endif %}"
  style="--ratio: {{ media.aspect_ratio | default: 1.0 }}; --preview-ratio: {{ media.preview_image.aspect_ratio | default: 1.0 }};"
>
  {%- comment -%}
    Custom video implementation:
    - Replaced deferred-media with direct video element for better mobile/desktop consistency
    - Added autoplay, muted, and loop for background-video-like behavior
    - Wrapped in deferred-media div to maintain styling/layout
    - Removed controls for cleaner look
  {%- endcomment -%}
    {%- if media.media_type == 'video' -%}
    <div class="media media--transparent mobile-only-video" data-media-id="{{ media.id }}">
      <video
        playsinline="true"
        autoplay="true"
        muted="true"
        loop="true"
        preload="none"
        poster="{{ media | img_url: '1024x' }}"
        alt="{{ media.alt | escape }}"
        aria-label="{{ media.alt | escape }}"
      >
        <source src="{{ media.sources[1].url }}" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    </div>
  {%- else -%}
  <modal-opener
    class="product__modal-opener product__modal-opener--{{ media.media_type }}"
    data-modal="#ProductModal-{{ modal_id }}"
  >
    <span
      class="product__media-icon motion-reduce quick-add-hidden{% if media.media_type == 'image' %} product__media-icon--{{ section.settings.image_zoom }}{% endif %}"
      aria-hidden="true"
    >
      {% case media.media_type %}
        {% when 'video', 'external_video' %}
          <span class="svg-wrapper">
            {{- 'icon-play.svg' | inline_asset_content -}}
          </span>
        {% when 'model' %}
          <span class="svg-wrapper">
            {{- 'icon-3d-model.svg' | inline_asset_content -}}
          </span>
        {% else %}
          <span class="svg-wrapper">
            {{- 'icon-zoom.svg' | inline_asset_content -}}
          </span>
      {% endcase %}
    </span>
    {%- render 'loading-spinner' -%}
    <div class="product__media media media--transparent">
      {{
        media.preview_image
        | image_url: width: 1946
        | image_tag:
          class: image_class,
          loading: lazy,
          sizes: sizes,
          widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946'
      }}
    </div>
    <button
      class="product__media-toggle quick-add-hidden product__media-zoom-{{ section.settings.image_zoom }}"
      type="button"
      aria-haspopup="dialog"
      data-media-id="{{ media.id }}"
    >
      <span class="visually-hidden">
        {{ 'products.product.media.open_media' | t: index: position }}
      </span>
    </button>
  </modal-opener>
  {%- endif -%}

      
  {%- if media.media_type != 'image' -%}
    {%- if media.media_type == 'model' -%}
      <product-model class="deferred-media media media--transparent" data-media-id="{{ media.id }}">
    {%- else -%}
      <deferred-media class="deferred-media media media--transparent" data-media-id="{{ media.id }}">
    {%- endif -%}
    <button id="Deferred-Poster-Modal-{{ media.id }}" class="deferred-media__poster" type="button">
      <span class="deferred-media__poster-button motion-reduce">
        {%- if media.media_type == 'model' -%}
          <span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
          <span class="svg-wrapper">
            {{- 'icon-3d-model.svg' | inline_asset_content -}}
          </span>
        {%- else -%}
          <span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
          <span class="svg-wrapper">
            {{- 'icon-play.svg' | inline_asset_content -}}
          </span>
        {%- endif -%}
      </span>
      {{
        media.preview_image
        | image_url: width: 1946
        | image_tag:
          loading: lazy,
          sizes: sizes,
          widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946'
      }}
    </button>
    <template>
      {%- liquid
        case media.media_type
          when 'external_video'
            assign video_class = 'js-' | append: media.host
            if media.host == 'youtube'
              echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: 'lazy'
            else
              echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: 'lazy'
            endif
          when 'video'
            echo media | media_tag: image_size: '2048x', autoplay: true, loop: loop, controls: none, preload: 'none' 
          when 'model'
            echo media | media_tag: image_size: '2048x', toggleable: true
        endcase
      -%}
    </template>
{% comment %} controls: none {% endcomment %}
    {%- if media.media_type == 'model' -%}
      </product-model>
      {%- if xr_button -%}
        <button
          class="button button--full-width product__xr-button"
          type="button"
          aria-label="{{ 'products.product.xr_button_label' | t }}"
          data-shopify-xr
          data-shopify-model3d-id="{{ media.id }}"
          data-shopify-title="{{ product.title | escape }}"
          data-shopify-xr-hidden
        >
          <span class="svg-wrapper">
            {{- 'icon-3d-model.svg' | inline_asset_content -}}
          </span>
          {{ 'products.product.xr_button' | t }}
        </button>
      {%- endif -%}
    {%- else -%}
      </deferred-media>
    {%- endif -%}
  {%- endif -%}
</div>