Video not playing in mobile mode for Dawn Theme

[anubee123]

Hi,

I tried editing the CSS code to fit the video on the mobile screen as the video does not appear in mobile but appears only on desktop. 

I am using Dawn template.

I tried this in the base.css file

@media (max-width:500px) {
.video-with-text__media {
padding-top: 100%;
width: 100%;
}
}

DId not work still. 

Pls help soon

[Markit-Themes]

Hi Anubee123,

Can you provide your store url?

Regards,

Markit-Themes

[BlackUmbrella]

@anubee123this 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
• 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

Style for main-product.liquid

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

Changes to product-thumbnail.liquid

<!-- ... rest of your code ... -->

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

<!-- ... rest of your code ... -->

 </modal-opener>
  {%- endif -%}