Video not playing on mobile website dawn theme

[kupizo]

I inserted the code that disables the zoom option on product images because a lot of people dont know how to exit it from mobile so they just leave the website, and i am pretty sure that it caused the video to not be able to play on mobile webiste. can someone find the solution to this problem?

Also i would just delete the code that unables zoom but i forgot where i entered it so i cant delete it now.

Video is now on product page but it just stands as a picture.

DAWN theme

[theyCallmepro]

Hello @kupizo

Can you please send your store link

[kupizo]

https://kupizo.com/

[BlackUmbrella]

@kupizo ,

Here’s a solution that worked for me. Don’t forget to activate ‘Enable video looping’ in the Customize Theme > Products.

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 code below
• Save changes

3. Add required CSS

• Open Sections folder
• Find main-product.liquid, or you can also do it inside base.css
• Add the new styles at the top of the file
• 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

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}
  Renders a product thumbnail with a modal-opener

  Accepts:
  - media: {Object} Product Media object
  - media_count: {Number} Number of media objects
  - position: {String} Position of the media. Used for accessible label.
  - desktop_layout: {String} Layout of the media for desktop.
  - mobile_layout: {String} Layout of the media for mobile.
  - loop: {Boolean} Enable video looping (optional)
  - modal_id: {String} The product modal that will be shown by clicking the thumbnail
  - xr_button: {Boolean} Renders the "View in your space" button (shopify-xr-button) if the media is a 3D Model
  - constrain_to_viewport: {Boolean} Force media height to fit within viewport
  - media_fit: {String} Method ("contain" or "cover") to fit image into container
  - media_width: {Float} The width percentage that the media column occupies on desktop.
  - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)

  Usage:
  {% render 'product-thumbnail',
    media: media,
    position: forloop.index,
    loop: section.settings.enable_video_looping,
    modal_id: section.id
  %}
{% endcomment %}

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