Video controls on the product page

[marycrichton123]

Hi All, 

This is my website: https://mishmash.world/

I really want to hide the video controls on the video on the product page and on mobile for the video to play automatically on loop: 

Can anyone help

Thanks so much, 

Mary

[marycrichton123]

I have been on the product.liquid, but I can not see the HTML to wrap - can you possibly help!? or send the instructions? 

THANK YOU 

[marycrichton123]

Which file do I paste this code in? Also there is no ref to No Controls?

[thescriptflow]

Hey @marycrichton123 I would be more than happy to remove the autoplay attribute on the product videos.

If you are familiar with coding or theme file then this process will go smoothly 😊. Because this need to remove the autoplay property in the main-product.liquid section.

Here is how you can find main-product.liquid, product.liquid theme file.

Am not sure which is the main product file. But I believed it will be  main-product.liquid or product.liquid.

Go to Shopify Admin > Online Store > Edit Code > main-product.liquid file.

In this file Search for 

controls="controls"

When you found it just remove it.

And then you will see there will be no video controls.

Let me know if you need more help.

Thanks.

[marycrichton123]

Hey, 

I could not find anything in the main-product.liquid file. 

i found this code in the snippets/product-media.liquid file 

{%- 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>

{%- if media.media_type == 'model' -%}
</product-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="{{ media.id }}"
data-shopify-title="title"
data-shopify-xr-hidden
>
<span class="svg-wrapper">{{ 'icon-3d-model' | inline_asset_content }}</span>
{{ 'products.product.xr_button' | t }}
</button>
</div>
{%- else -%}
</deferred-media>
{%- endif -%}
{%- endif -%}

Is there something I should change?

[marycrichton123]

This is amazing, I am just confused at which part I should be deleting and which I should be pasting?!

[marycrichton123]

Are you show me the instructions, or do you want to do it?