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?
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?
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
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 -%}
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.
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
its not working