Solved

How do i autoplay a video in my product page?

Buddings
Excursionist
45 1 6

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

Screenshot 2021-07-12 120242.png

 

Accepted Solution (1)

Buddings
Excursionist
45 1 6

This is an accepted solution.

Replies 21 (21)

Buddings
Excursionist
45 1 6

This is an accepted solution.

solved

DanielWolf
Tourist
3 0 2

Hello! How did you solve this?

DanielWolf
Tourist
3 0 2

Found the solution.

 

DanielWolf_0-1638123688388.png

 

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.

 

rfaustine
Visitor
2 0 0

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. 

Fourthstyles450
Tourist
7 0 0

did you ever get a solution? i am alson trying to autoplay my product video

loganleopold
Shopify Partner
7 0 2

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:

 <video muted> </video>


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

Fourthstyles450
Tourist
7 0 0

hey thanks but where do i put this code?

loganleopold
Shopify Partner
7 0 2

So, it depends on what theme you have/where you need this to happen. Are you on Dawn? @Fourthstyles450 

rfaustine
Visitor
2 0 0

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. 

 

https://jaxxon.com/products/cuban-link-chain-3mm-gold

loganleopold
Shopify Partner
7 0 2

@rfaustine @Fourthstyles450 

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:

    <template>
      {%- case media.media_type -%}
      {%- when 'external_video' -%}
        {%- assign video_class = 'js-' | append: media.host -%}
        {%- if media.host == 'youtube' -%}
          {{ media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy" }}
        {%- else -%}
          {{ media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy" }}
        {%- endif -%}
      {%- when 'video' -%}
        {{ media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none" }}
      {%- when 'model' -%}
        {{ media | media_tag: image_size: "2048x", toggleable: true }}
      {%- endcase -%}
    </template>


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. 

RachelGYK
Visitor
1 0 0

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..

 

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

 

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 🙂 

Koong
Visitor
1 0 0

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.

Isabellebrian26
Visitor
1 0 0

Hi, i dont have a media.liquid file in my kalles theme, did you create your own

Query1
Visitor
1 0 0

Does this also work on the Sense theme if not how do I get it to work?

Wanobi_93
Shopify Partner
2 0 0

Hi! Thank you for sharing. Where do I add code to put a video on Autoplay on the Craft theme?


loganleopold
Shopify Partner
7 0 2

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. 

Miss_HSC
Visitor
2 0 0

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! 

loganleopold
Shopify Partner
7 0 2

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. 

Miss_HSC
Visitor
2 0 0

Thank you - will do.

bringthebling
Visitor
1 0 0

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" 

ahadmodak
Visitor
1 0 0

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 }}"
>
<div id="GalleryStatus-{{ section.id }}" class="visually-hidden" role="status"></div>
<slider-component id="GalleryViewer-{{ section.id }}{{ id_append }}" class="slider-mobile-gutter">
{%- unless is_duplicate -%}
<a class="skip-to-content-link button visually-hidden quick-add-hidden" href="#ProductInfo-{{ section.id }}">
{{ 'accessibility.skip_to_product_info' | t }}
</a>
{%- endunless -%}
<ul
id="Slider-Gallery-{{ section.id }}{{ id_append }}"
class="product__media-list contains-media grid grid--peek list-unstyled slider slider--mobile"
role="list"
>
{%- if product.selected_or_first_available_variant.featured_media != null -%}
{%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
<li
id="Slide-{{ section.id }}-{{ featured_media.id }}{{ id_append }}"
class="product__media-item grid__item slider__slide is-active{% if single_media_visible %} product__media-item--single{% endif %}{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant{% endif %}"
data-media-id="{{ section.id }}-{{ featured_media.id }}"
>
{%- 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
%}
</li>
{%- endif -%}
{%- for media in product.media -%}
{%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
<li
id="Slide-{{ section.id }}-{{ media.id }}{{ id_append }}"
class="product__media-item grid__item slider__slide{% if single_media_visible %} product__media-item--single{% endif %}{% if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}"
data-media-id="{{ section.id }}-{{ 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
%}
</li>
{%- endunless -%}
{%- endfor -%}
</ul>
{%- unless is_duplicate -%}
<div class="slider-buttons no-js-hidden quick-add-hidden{% if hide_mobile_slider %} small-hide{% endif %}">
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'general.slider.previous_slide' | t }}"
>
{% render 'icon-caret' %}
</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ media_count }}</span>
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'general.slider.next_slide' | t }}"
>
{% render 'icon-caret' %}
</button>
</div>
{%- endunless -%}
</slider-component>
{%- if first_3d_model -%}
<button
class="button button--full-width product__xr-button"
type="button"
aria-label="{{ 'products.product.xr_button_label' | t }}"
data-shopify-xr
data-shopify-model3d-id="{{ first_3d_model.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden
>
{% render 'icon-3d-model' %}
{{ 'products.product.xr_button' | t }}
</button>
{%- endif -%}
{%- if media_count > 1
and section.settings.gallery_layout contains 'thumbnail'
or section.settings.mobile_thumbnails == 'show'
-%}
<slider-component
id="GalleryThumbnails-{{ section.id }}{{ id_append }}"
class="thumbnail-slider slider-mobile-gutter quick-add-hidden{% unless section.settings.gallery_layout contains 'thumbnail' %} medium-hide large-up-hide{% endunless %}{% if section.settings.mobile_thumbnails != 'show' %} small-hide{% endif %}{% if media_count <= 3 %} thumbnail-slider--no-slide{% endif %}"
>
<button
type="button"
class="slider-button slider-button--prev{% if media_count <= 3 %} small-hide{% endif %}{% if media_count <= 4 %} medium-hide large-up-hide{% endif %}"
name="previous"
aria-label="{{ 'general.slider.previous_slide' | t }}"
aria-controls="GalleryThumbnails-{{ section.id }}"
data-step="3"
>
{% render 'icon-caret' %}
</button>
<ul
id="Slider-Thumbnails-{{ section.id }}{{ id_append }}"
class="thumbnail-list list-unstyled slider slider--mobile{% if section.settings.gallery_layout == 'thumbnail_slider' %} slider--tablet-up{% endif %}"
>
{%- 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 -%}

{%- 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
-%}
<li
id="Slide-Thumbnails-{{ section.id }}-0{{ id_append }}"
class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains featured_media.src %} thumbnail-list_item--variant{% endif %}"
data-target="{{ section.id }}-{{ featured_media.id }}"
data-media-position="{{ media_index }}"
>
{%- capture thumbnail_id -%}
Thumbnail-{{ section.id }}-0{{ id_append }}
{%- endcapture -%}
<button
class="thumbnail global-media-settings global-media-settings--no-shadow"
aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
aria-current="true"
aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
aria-describedby="{{ thumbnail_id }}"
>
{{ 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
}}
</button>
</li>
{%- 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
-%}
<li
id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}{{ id_append }}"
class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}"
data-target="{{ section.id }}-{{ media.id }}"
data-media-position="{{ media_index }}"
>
{%- if media.media_type == 'model' -%}
<span class="thumbnail__badge" aria-hidden="true">
{%- render 'icon-3d-model' -%}
</span>
{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
<span class="thumbnail__badge" aria-hidden="true">
{%- render 'icon-play' -%}
</span>
{%- endif -%}
{%- capture thumbnail_id -%}
Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}
{%- endcapture -%}
<button
class="thumbnail global-media-settings global-media-settings--no-shadow"
aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
{% if media == product.selected_or_first_available_variant.featured_media
or product.selected_or_first_available_variant.featured_media == null
and forloop.index == 1
%}
aria-current="true"
{% endif %}
aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
aria-describedby="{{ thumbnail_id }}"
>
{{ 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
}}
</button>
</li>
{%- endunless -%}
{%- endfor -%}
</ul>
<button
type="button"
class="slider-button slider-button--next{% if media_count <= 3 %} small-hide{% endif %}{% if media_count <= 4 %} medium-hide large-up-hide{% endif %}"
name="next"
aria-label="{{ 'general.slider.next_slide' | t }}"
aria-controls="GalleryThumbnails-{{ section.id }}"
data-step="3"
>
{% render 'icon-caret' %}
</button>
</slider-component>
{%- endif -%}
</media-gallery>