How should i make my product video autoplay in featured collection in craft theme?

I am encountering an issue with the Craft theme as I cannot get the product video to autoplay. Despite attempting to convert the video from MP4 to WebP, the expected functionality was not achieved. I am seeking urgent assistance as I have surpassed the deadline. have been using Craft theme and I am facing an issue i want the product video to auto play i tried mp4 to webp but it did not work as expected need some urgent help i am past my deadline

Hi @tatvika , Can you please share the URL for that?

1 Like

https://shoptatvika.com/

Hi @tatvika , Are you facing an issue on the Product Page? As I can see there is no product with a video on the Featured collection.


Is this the section where you are facing the issue?

1 Like

i want that video to autoplay in featured collection and in product page

In your product template file write this js to autoplay the video


1 Like

where can i find the product template file?

It depends on which theme you are using. Can you share collaborator access with me so I can do it for you

Hi @tatvika , Replace the below code in your “product-thumbnail.liquid”. To open the code editor follow the below stepls in the screenshot.

Replace the below code with your code.

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

  

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

1 Like

this is what its showing i have not pasted the code this is just a screenshot do i have to replace the whole code or just from 122

If you have not made any changes to the file then you can replace the whole code otherwise, you can replace the code from 105.

1 Like

in the first image the video is not playing in the latest collection on the home screen
in the scond image the video is playing but its only playing in desktop not in mobile
link to the website https://shoptatvika.com/?_ab=0&_fd=0&_sc=1

mine 105 looks different

its not working