Product video refuses to autoplay (Refresh theme)

[CozyCampfire]

Many of my products use large GIF images which are slow to load and have a huge download size. I'm trying to replace them with videos now that products support video files. I was hoping to emulate GIF behavior by having the video play automatically. However, when I go to a product page I always see this play button that must be clicked to manually start the video:

I use the Refresh theme. In the code, I found the snippet that seems to be rendering the video, which is called "product-thumbnail.liquid". I noticed the media_tag already includes autoplay: true but it still won't play when the page loads:

I think that Shopify is adding its own overlay over the video that creates the play button icon shown in the first picture above and blocks the <video> tag from even displaying until that button is clicked, so that may be causing this. I have no idea how to remove this overlay correctly, so any help here is greatly appreciated. This "Deferred-Poster-Modal-" shown below may be generating this play button overlay, but I'm not entirely sure:

[PaulNewton]

The refresh theme is based on dawn , so discussions about dawn can also apply when searching for a solution to refresh theme changes.

Autoplaying video is a user annoyance so most things are setup to prevent merchants from shooting themselves in the foot with media.

Unless a product itself is animated or the target demographic is known to be on highspeed devices autoplay should be avoided.

If on mobile also be aware video with audio will not autoplay in most browsers, they need to have the muted attribute to autoplay in such situations.

Always backup themes before making code changes

The Deferred behavior is a result of the video element, or iframe, being inside a <template> html tag and is controlled in the global.js DeferredMedia  class.

https://github.com/Shopify/dawn/blob/main/sections/video.liquid#L72 

https://github.com/Shopify/dawn/blob/main/snippets/product-media.liquid#L67 

https://github.com/Shopify/dawn/blob/main/snippets/product-thumbnail.liquid#L130 

https://github.com/Shopify/dawn/blob/main/assets/global.js#L501 

So the media content is not actually loaded/created into the DOM before the deferred poster is clicked and the html fragment content inside the <template> element is then dynamically loaded into the page html.

To change this you need to either introduce logic into the existing templates specifically flag sections/blocks that can autoplay a SINGLE video, along with hiding/not-rendering the deferred placeholder overlay|button. Or make a different snippets/sections without that logic.

Logic such as checking if the media is the resources featured media, or the first video rendered, or a special setting,etc.

A way to do this is to capture the media output then use that variable with logic to either output the or the <template>

Do not just blindly remove/unwrap video html from the inside the <template> tag as this would mean any and all autoplay videos may try to play and load thus degrading site performance; read reduce conversions and cost revenue. Think it through and use very specific logic.

If after moving content out of <template> tags or for non dawn themes,  If these are externally hosted video embeds inspect the rendered source to confirm the generated iframes/urls and video elements have the appropriate attributes such as autoplay.

Example youtube https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cmake-an-embedded-video-play-automati... 

[CozyCampfire]

Hi Paul,

thanks for such a detailed response this is super helpful. I understand now that the <template> tag is what keeps the player hidden until the overlay button is clicked and the javascript removed the tag. How would you recommend I safely update the code to remove or hide the deferred overlay button as well as the <template> tag? I also wonder if the video overlay click javascript should still be running in some regard, is there anything else the javascript is doing beyond removing the template tag that is still useful? Some of the products will also have videos for variants so I'm not sure what javascript runs when the variant is clicked and the video preview changes. The only place in my theme where I would like to have the video autoplay is on specific product pages for the main product image.

Thank you!

[Rod-McInnis]

Did you ever get resolution on this? I'm encountering the same problem.

[JV_23]

I am also having the same issue