Hello I am using Ira theme and I would like to autoplay this video in my product page, however it is not playing and is showing as a static image. How do I solve this?
website: buddings.co
solved
Hello! How did you solve this?
1 Like
Found the solution.
Add
autoplay: true,
to where line 73 is in my screenshot in the media.liquid file.
Also be sure to add:
.theme-gallery .product-media--frame .plyr.plyr__tab-focus::after, .theme-gallery .product-media--frame model-viewer.focus-visible::after {
box-shadow: none !important;
}
At the bottom of your style.css file for disabling the outline on the video.
1 Like
Also want to drop here just in case it helps someone that in many/most modern browsers, they have limited autoplay to videos that are also muted by default. This is what was tripping me up just now. Any video that you want to autoplay should be muted by default in most browsers.
Is there a solution for this within the Dawn theme? Trying to upload a short video clip into the product images section and I want it to autoplay, loop and be on mute.
did you ever get a solution? i am alson trying to autoplay my product video
Hey @rfaustine and @Fourthstyles450 - just wanted to highlight like in my above post that the videos need to be muted by default. Thatâs either got to be on the element itâs self:
or, in the case of Youtube, you can also specify that parameter in the URL you are requesting itself:
âyour_url_here/videoâs_id_will_be_here?&mute=1â.
1 Like
hey thanks but where do i put this code?
So, it depends on what theme you have/where you need this to happen. Are you on Dawn? @Fourthstyles450
yes we are Dawn. so here is a sample site where I have seen it done. Notice the last product image how it automatically plays as you scroll down.
So Iâve seen where this is in your base Dawn theme.
In the code editor view, you go to the snippets folder on the left hand side > then to product-media.liquid.
You will see a block like:
You need to insert the âmuted: trueâ into that list. So these:
external_video_url: autoplay: true, loop: loop, playlist: media.external_id
become this:
external_video_url: muted: true, autoplay: true, loop: loop, playlist: media.external_id
Then your videos should play automatically. Youâll have to do that for every instance in that file where there is a list that includes autoplay, loop, etc. Thereâs three in the snippet above I provided, but your file may be edited slightly depending on if youâve had custom work done or not.
Does anyone know if this is possible with the Spark Theme? I would like some product videos vs photos to display on my product page. I tried to follow the directions for the Dawn theme, to no avail. Please assist if you can. Thanks!
Unfortunately @Miss_HSC , I donât think the developers that sell the Spark theme let that codebase be public, so I canât see where it is. Youâd be better off seeking support for where to make an edit like this in the codebase from them.
Thank you - will do.
Hi, I have also been trying to do this and thank you so much for giving your amazing answer. It has worked brilliantly on desktop but not on mobile. Am I right that my block code should be..
{%- case media.media_type -%} {%- when 'external_video' -%} {%- assign video_class = 'js-' | append: media.host -%} {%- if media.host == 'youtube' -%} {{ media | external_video_url: muted: true, autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy" }} {%- else -%} {{ media | external_video_url: muted: true, autoplay: true, loop: loop, playlist: media.external_id }} {%- endif -%} {%- when 'video' -%} {{ media | media_tag: image_size: "2048x", muted: true, autoplay: true, loop: loop, controls: true, preload: "none" }} {%- when 'model' -%} {{ media | media_tag: image_size: "2048x", toggleable: true }} {%- endcase -%}I have added the muted: true three times. I would be so grateful for your help if possible and a massive thank you 
My product page is https://giveyourselfkindness.com/products/the-give-yourself-kindness-journal. Thank you
Hello,
It works on the desktop. But on mobile, it doesnât work. The code says: âexternal_video_urlâ how about âinternal_video_urlâ I mean upload video to Shopify File. Thank you.
Dawn theme as wellâŚthis didnât work but Iâm also hosting video on my shopify url..so Iâm thinking thus itâs not an âexternal host/urlâ
Hi, i dont have a media.liquid file in my kalles theme, did you create your own
Hello,
Iâve added the .liquid file code of my product details page below. In that, I have added certain videos that I would like to autoplay rather than having the user click on the play button. Is there any way to do that? Please guide.
Thank you.
{% comment %}
Renders a product media gallery. Should be used with âmedia-gallery.jsâ
Also see âproduct-media-modalâ
Accepts:
- product: {Object} Product liquid object
- variant_images: {Array} Product images associated with a variant
- is_duplicate: {Boolean} Prevents rendering uneeded elements and duplicate ids for subsequent instances
Usage:
{% render âproduct-media-galleryâ, is_duplicate: true %}
{% endcomment %}
{%- liquid
if section.settings.hide_variants and variant_images.size == product.media.size
assign single_media_visible = true
endif
assign media_count = product.media.size
if section.settings.hide_variants and media_count > 1 and variant_images.size > 0
assign media_count = media_count | minus: variant_images.size | plus: 1
endif
if media_count == 1 or single_media_visible
assign single_media_visible_mobile = true
endif
if media_count == 0 or single_media_visible_mobile or section.settings.mobile_thumbnails == âshowâ or section.settings.mobile_thumbnails == âcolumnsâ and media_count < 3
assign hide_mobile_slider = true
endif
if section.settings.media_size == âlargeâ
assign media_width = 0.65
elsif section.settings.media_size == âmediumâ
assign media_width = 0.55
elsif section.settings.media_size == âsmallâ
assign media_width = 0.45
endif
assign id_append = ââ
if is_duplicate
assign id_append = â-duplicateâ
endif
-%}
<media-gallery
id=âMediaGallery-{{ section.id }}{{ id_append }}â
role=âregionâ
{% if section.settings.enable_sticky_info %}
class=âproduct__column-stickyâ
{% endif %}
aria-label=â{{ âproducts.product.media.gallery_viewerâ | t }}â
data-desktop-layout=â{{ section.settings.gallery_layout }}â
-
{%- if product.selected_or_first_available_variant.featured_media != null -%}
{%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
- {%- assign media_position = 1 -%} {% render 'product-thumbnail', media: featured_media, media_count: media_count, position: media_position, desktop_layout: section.settings.gallery_layout, mobile_layout: section.settings.mobile_thumbnails, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, media_fit: section.settings.media_fit, constrain_to_viewport: section.settings.constrain_to_viewport, lazy_load: false %} {%- endif -%} {%- for media in product.media -%} {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
- {%- liquid assign media_position = media_position | default: 0 | plus: 1 assign lazy_load = false if media_position > 1 assign lazy_load = true endif -%} {% render 'product-thumbnail', media: media, media_count: media_count, position: media_position, desktop_layout: section.settings.gallery_layout, mobile_layout: section.settings.mobile_thumbnails, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, media_fit: section.settings.media_fit, constrain_to_viewport: section.settings.constrain_to_viewport, lazy_load: lazy_load %} {%- endunless -%} {%- endfor -%}
{% render 'icon-caret' %}
{%- endunless -%}
{%- if first_3d_model -%}
{% render 'icon-3d-model' %}
{{ 'products.product.xr_button' | t }}
{%- endif -%}
{%- if media_count > 1
and section.settings.gallery_layout contains 'thumbnail'
or section.settings.mobile_thumbnails == 'show'
-%}
{% render 'icon-caret' %}
1
/
{{ 'general.slider.of' | t }}
{{ media_count }}
{% render 'icon-caret' %}
-
{%- capture sizes -%}
(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width | minus: 100 | times: media_width | round }} - 4rem) / 4),
(min-width: 990px) calc(({{ media_width | times: 100 }}vw - 4rem) / 4),
(min-width: 750px) calc((100vw - 15rem) / 8),
calc((100vw - 8rem) / 3)
{%- endcapture -%}
- {%- capture thumbnail_id -%} Thumbnail-{{ section.id }}-0{{ id_append }} {%- endcapture -%} {{ featured_media.preview_image | image_url: width: 416 | image_tag: loading: 'lazy', sizes: sizes, widths: '54, 74, 104, 162, 208, 324, 416', id: thumbnail_id, alt: featured_media.alt | escape }} {%- endif -%} {%- for media in product.media -%} {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} {%- liquid capture media_index if media.media_type == 'model' increment model_index elsif media.media_type == 'video' or media.media_type == 'external_video' increment video_index elsif media.media_type == 'image' increment image_index endif endcapture assign media_index = media_index | plus: 1 -%}
- {%- if media.media_type == 'model' -%} {%- render 'icon-3d-model' -%} {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%} {%- render 'icon-play' -%} {%- endif -%} {%- capture thumbnail_id -%} Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }} {%- endcapture -%} {{ media.preview_image | image_url: width: 416 | image_tag: loading: 'lazy', sizes: sizes, widths: '54, 74, 104, 162, 208, 324, 416', id: thumbnail_id, alt: media.alt | escape }} {%- endunless -%} {%- endfor -%}
{%- if featured_media != null -%}
{%- liquid
capture media_index
if featured_media.media_type == âmodelâ
increment model_index
elsif featured_media.media_type == âvideoâ or featured_media.media_type == âexternal_videoâ
increment video_index
elsif featured_media.media_type == âimageâ
increment image_index
endif
endcapture
assign media_index = media_index | plus: 1
-%}