FROM CACHE - en_header

How do i autoplay a video in my product page?

Solved
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)

Accepted Solutions
Buddings
Excursionist
45 1 6

This is an accepted solution.

Replies 11 (11)
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.

 

loganleopold
Shopify Partner
4 0 1

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. 

rfaustine
New Member
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
4 0 1

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
4 0 1

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

rfaustine
New Member
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
4 0 1

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