Dawn Theme Video Autoplay not working on Mobile

Store Design
,
1

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:

#openthinkingvideo { display:block; max-width: 100%; width: 100%; padding: 0; margin: 0 }

Theme: Dawn

Website: Falsari.com

2

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

1 Like
3

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.

4

love you

5

@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

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 -%}

  {%- 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' -%}
    

      
    

  {%- else -%}
  
  {%- endif -%}

      
  {%- if media.media_type != 'image' -%}
    {%- if media.media_type == 'model' -%}
      
      {%- if xr_button -%}
        
      {%- endif -%}
    {%- else -%}
      
    {%- endif -%}
  {%- endif -%}