Dawn Theme Video Autoplay not working on Mobile

[Falsari]

Hello!

I just implemented my custom video through a liquid, which works great on desktop; however, the video has a play button on mobile. It seemed to be working recently, but now it needs to be played. Is there any way of fixing this?

Here is the code used in the liquid in the theme editor:

<video autoplay="autoplay" loop="loop" muted="muted" defaultMuted playsinline oncontextmenu="return false;" preload="auto" id="openthinkingvideo"><source src="VIDEO HERE" type="video/mp4"></video><style>#openthinkingvideo { display:block; max-width: 100%; width: 100%; padding: 0; margin: 0 }</style>

Theme: Dawn

Website: Falsari.com

[Falsari]

Edit: Found a partial solution - turned off low-power mode on phone, video autoplay just fine.

[Mark2000]

love you

[EcomGraduates]

Hello there 

To enable autoplay for videos on mobile devices in Shopify, you will need to use a third-party app or custom code.

Here are some options you can consider:

1. Use a video player app: There are several Shopify apps that allow you to add videos to your store and customize the player settings, including autoplay. Some popular options include Vidembed, Video player by Shopify, and Lottie.
2. Use custom code: If you are comfortable with code, you can use custom HTML and CSS to create a video player and enable autoplay. You can either add the code directly to your Shopify theme or use an app like Code injection to insert the code into your store.

Keep in mind that autoplay may not be supported on all mobile devices or web browsers, and some users may have autoplay disabled in their settings. Additionally, autoplay can be intrusive and may negatively affect the user experience, so it is important to use it sparingly and consider the user's preferences.

[BlackUmbrella]

@Falsari,

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>