How can i auto play videos in Dawn theme?

[Danish864]

Hi i want to autoplay video in Dawn theme. And i want to remove play/pause icon from it. Thankyou

[Shopi5_Coders]

Hello. 

You can insert this code

<video class="video-background" loop="" muted="" no-controls="" autoplay="" src="VIDEO URL HERE" playsinline="" style="transform: scale(1.27563, 1.27563);">
<source type="video/mp4" src="">
</source></video>

<style>
.video-background {
width: 100%;
padding-top: 200px;
opacity: 0.6;
height: auto;
left: 0;
top: 0;
}


</style>

[Danish864]

Thanks for your reply. Please guide me where i have to paste this link. also let me know should i enter my video url in the code where it says src ?

[Shopi5_Coders]

Yes, you will put the video source in the src between the " ". 

if your theme have a custom section you can make a custom section with html and paste it there. 

If you're Danish as your name states you can contact us in a private message in Danish as it's our main language.

[Danish864]

Thanks for your kind words for me. I did not try the code because I switched to other theme. Just saw your message about my name so i wanted to reply . Yeah my name is Danish (your language name) but it means in my language is Intelligent .

[LukePlayhood]

hi, i tried the code but the video doesnt fit in the mobile view. and also, there is a opaque-ness to it. pls advice thank yoU!

[jerseycitykicks]

Hey did you ever find a solution to this I am looking for the same answer

[Shopi5_Coders]

Hello @jerseycitykicks 

Please send URL to your store. 

[Shopi5_Coders]

Hello @LukePlayhood 

Please send your URL

[aprilp777]

Hi There!

Where would i paste this code? somewhere in the video.liquid file? Or should i create a whole separate liquid file?

[kvyz]

This worked perfectly for me, thank you! 😁

[vertalm]

Looks like this is bug in Down theme

But

You can try replace this part of code in product-thumbnail.liquid

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

To this one

  {% if media.media_type != 'video' %}    
  <template>
  {%- endif -%}
    
    {%- liquid
      case media.media_type
      when 'external_video'
        assign video_class = 'js-' | append: media.host
        if media.host == 'youtube'
          echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy"
        else
          echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy"
        endif
      when 'video'
        assign videos = product.media | where: "media_type", "video" 
      	assign video_url = videos[0].sources[1].url 
      	echo '<video autoplay loop muted playsinline width="100%"><source src="' 
        echo video_url
        echo '" type="video/mp4"> </video>'
      when 'model'
        echo media | media_tag: image_size: "2048x", toggleable: true
      endcase
    -%}
    
  {% if media.media_type != 'video' %} 
  </template>
  {%- endif -%}

[jphg]

Almost!

But does not… really work… 😕 

Questions:

• is there a video file size limit to enable "autoplay: true"???    Mine are 17 Mo ~.

• when does autoplay… play? at the end of the complete loading or imediately ?

• I see now autoplay is working on product page, but the play button remains visible……

• does not autoplay on hover as 2nd image on collection page (product grid)…

… a bit lost.

[vertalm]

Ok, then try this one

product-thumbnail.liquid

{% comment %}
    Renders a product thumbnail with a modal-opener

    Accepts:
    - media: {Object} Product Media object
    - position: {String} Position of the media. Used for accessible label.
    - loop: {Boolean} Enable video looping (optional)
    - modal_id: {String} The product modal that will be shown by clicking the thumbnail
    - xr_button: {Boolean} Renders the "View in your space" button (shopify-xr-button) if the media is a 3D Model

    Usage:
    {% render 'product-thumbnail',
      media: media,
      position: forloop.index,
      loop: section.settings.enable_video_looping,
      modal_id: section.id,
	  autoplay: true
    %}
{% endcomment %}

<noscript>
  {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
    <span class="product__media-icon motion-reduce">{% render 'icon-play' %}</span>
    <div class="product__media media" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
      <img
        srcset="{% if media.preview_image.width >= 288 %}{{ media.preview_image | img_url: '288x' }} 288w,{% endif %}
                {% if media.preview_image.width >= 500 %}{{ media.preview_image | img_url: '500x' }} 500w,{% endif %}
          {% if media.preview_image.width >= 576 %}{{ media.preview_image | img_url: '576x' }} 576w,{% endif %}
          {% if media.preview_image.width >= 750 %}{{ media.preview_image | img_url: '750x' }} 750w,{% endif %}
          {% if media.preview_image.width >= 1100 %}{{ media.preview_image | img_url: '1100x' }} 1100w,{% endif %}
          {% if media.preview_image.width >= 1500 %}{{ media.preview_image | img_url: '1500x' }} 1500w{% endif %}"
        src="{{ media | img_url: '1500x' }}"
        sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: 0.64 | round }}px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
        loading="lazy"
        width="576"
        height="{{ 576 | divided_by: media.preview_image.aspect_ratio | ceil }}"
        alt="{{ media.preview_image.alt | escape }}"
      >
    </div>
    <a href="{% if media.media_type == 'video' %}{{ media.sources[1].url }}{% else %}{{ media | external_video_url }}{% endif %}" class="product__media-toggle">
      <span class="visually-hidden">{{ 'products.product.video_exit_message' | t: title: product.title | escape }}</span>
    </a>
  {%- else -%}
    <div class="product__media media" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
      <img
        srcset="{% if media.preview_image.width >= 288 %}{{ media.preview_image | img_url: '288x' }} 288w,{% endif %}
                {% if media.preview_image.width >= 500 %}{{ media.preview_image | img_url: '500x' }} 500w,{% endif %}
          {% if media.preview_image.width >= 576 %}{{ media.preview_image | img_url: '576x' }} 576w,{% endif %}
          {% if media.preview_image.width >= 750 %}{{ media.preview_image | img_url: '750x' }} 750w,{% endif %}
          {% if media.preview_image.width >= 1100 %}{{ media.preview_image | img_url: '1100x' }} 1100w,{% endif %}
          {% if media.preview_image.width >= 1500 %}{{ media.preview_image | img_url: '1500x' }} 1500w{% endif %}"
        src="{{ media | img_url: '1500x' }}"
        sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: 0.64 | round }}px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
        loading="lazy"
        width="576"
        height="{{ 576 | divided_by: media.preview_image.aspect_ratio | ceil }}"
        alt="{{ media.preview_image.alt | escape }}"
      >
    </div>
  {%- endif -%}
</noscript>

<modal-opener class="product__modal-opener product__modal-opener--{{ media.media_type }} no-js-hidden" data-modal="#ProductModal-{{ modal_id }}">
  <span class="product__media-icon motion-reduce" aria-hidden="true">
    {%- liquid
      case media.media_type
      when 'video' or 'external_video'
        render 'icon-play'
      when 'model'
        render 'icon-3d-model'
      else
        render 'icon-zoom'
      endcase
    -%}
  </span>

  {% if media.media_type != 'video' %} 
  <div class="product__media media media--transparent" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
    <img
      srcset="{% if media.preview_image.width >= 288 %}{{ media.preview_image | img_url: '288x' }} 288w,{% endif %}
              {% if media.preview_image.width >= 500 %}{{ media.preview_image | img_url: '500x' }} 500w,{% endif %}
        {% if media.preview_image.width >= 576 %}{{ media.preview_image | img_url: '576x' }} 576w,{% endif %}
        {% if media.preview_image.width >= 750 %}{{ media.preview_image | img_url: '750x' }} 750w,{% endif %}
        {% if media.preview_image.width >= 1100 %}{{ media.preview_image | img_url: '1100x' }} 1100w,{% endif %}
        {% if media.preview_image.width >= 1500 %}{{ media.preview_image | img_url: '1500x' }} 1500w{% endif %}"
      src="{{ media | img_url: '1500x' }}"
      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: 0.64 | round }}px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
      loading="lazy"
      width="576"
      height="{{ 576 | divided_by: media.preview_image.aspect_ratio | ceil }}"
      alt="{{ media.preview_image.alt | escape }}"
    >
  </div>
  <button class="product__media-toggle" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
    <span class="visually-hidden">
      {%- if position == 'featured' %}
        {{ 'products.product.media.open_featured_media' | t }}
      {%- else -%}
        {{ 'products.product.media.open_media' | t: index: position }}
      {%- endif -%}
    </span>
  </button>
  {%- else -%}
    {%- liquid
        assign videos = product.media | where: "media_type", "video" 
      	assign video_url = videos[0].sources[1].url 
      	echo '<video autoplay loop muted playsinline width="100%"><source src="' 
        echo video_url
        echo '" type="video/mp4"> </video>'
    -%}
  {%- endif -%}
  
  
</modal-opener>

{%- if media.media_type != 'image' -%}
  {%- if media.media_type == 'model' -%}
    <product-model class="deferred-media media media--transparent no-js-hidden" style="padding-top: 100%" data-media-id="{{ media.id }}">
  {%- else -%}
    <deferred-media class="deferred-media media no-js-hidden" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%" data-media-id="{{ media.id }}">
  {%- endif -%}
      
  {% if media.media_type != 'video' %} 
  <button id="Deferred-Poster-Modal-{{ media.id }}" class="deferred-media__poster" type="button">
    <span class="deferred-media__poster-button motion-reduce">
      {%- if media.media_type == 'model' -%}
        <span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
        {%- render 'icon-3d-model' -%}
      {%- else -%}
        <span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
        {%- render 'icon-play' -%}
      {%- endif -%}
    </span>
    <img
      srcset="{% if media.preview_image.width >= 288 %}{{ media.preview_image | img_url: '288x' }} 288w,{% endif %}
              {% if media.preview_image.width >= 500 %}{{ media.preview_image | img_url: '500x' }} 500w,{% endif %}
        {% if media.preview_image.width >= 576 %}{{ media.preview_image | img_url: '576x' }} 576w,{% endif %}
        {% if media.preview_image.width >= 750 %}{{ media.preview_image | img_url: '750x' }} 750w,{% endif %}
        {% if media.preview_image.width >= 1100 %}{{ media.preview_image | img_url: '1100x' }} 1100w,{% endif %}
        {% if media.preview_image.width >= 1500 %}{{ media.preview_image | img_url: '1500x' }} 1500w{% endif %}"
      src="{{ media | img_url: '1500x' }}"
      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: 0.64 | round }}px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
      loading="lazy"
      width="576"
      height="{{ 576 | divided_by: media.preview_image.aspect_ratio }}"
      alt="{{ media.preview_image.alt | escape }}"
    >
  </button>
  {%- endif -%}
      
  {% if media.media_type != 'video' %}    
  <template>
  {%- endif -%}
    
    {%- liquid
      case media.media_type
      when 'external_video'
        assign video_class = 'js-' | append: media.host
        if media.host == 'youtube'
          echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy"
        else
          echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy"
        endif
      when 'video'
        assign videos = product.media | where: "media_type", "video" 
      	assign video_url = videos[0].sources[1].url 
      	echo '<video autoplay loop muted playsinline width="100%"><source src="' 
        echo video_url
        echo '" type="video/mp4"> </video>'
      when 'model'
        echo media | media_tag: image_size: "2048x", toggleable: true
      endcase
    -%}
    
  {% if media.media_type != 'video' %} 
  </template>
  {%- endif -%}

  {%- if media.media_type == 'model' -%}
    </product-model>
    {%- if xr_button -%}
      <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
        >
        {% render 'icon-3d-model' %}
        {{ 'products.product.xr_button' | t }}
      </button>
    {%- endif -%}
  {%- else -%}
    </deferred-media>
  {%- endif -%}
{%- endif -%}

And product-media.liquid

{% comment %}
    Renders product media

    Accepts:
    - media: {Object} Product Media object
    - loop: {Boolean} Enable video looping (optional)
    - variant_image: {Boolean} The media associated with a variant

    Usage:
    {% render 'product-media',
      media: media,
      loop: section.settings.enable_video_looping,
      variant_image: true,
	  autoplay: true
    %}
{% endcomment %}

{%- if media.media_type == 'image' -%}
  <img
    srcset="{%- if media.preview_image.width >= 550 -%}{{ media.preview_image | img_url: '550x' }} 550w,{%- endif -%}
            {%- if media.preview_image.width >= 1100 -%}{{ media.preview_image | img_url: '1100x' }} 1100w,{%- endif -%}
            {%- if media.preview_image.width >= 1445 -%}{{ media.preview_image | img_url: '1445x' }} 1445w,{%- endif -%}
            {%- if media.preview_image.width >= 1680 -%}{{ media.preview_image | img_url: '1680x' }} 1680w,{%- endif -%}
            {%- if media.preview_image.width >= 2048 -%}{{ media.preview_image | img_url: '2048x' }} 2048w,{%- endif -%}
            {%- if media.preview_image.width >= 2200 -%}{{ media.preview_image | img_url: '2200x' }} 2200w,{%- endif -%}
            {%- if media.preview_image.width >= 2890 -%}{{ media.preview_image | img_url: '2890x' }} 2890w,{%- endif -%}
            {%- if media.preview_image.width >= 4096 -%}{{ media.preview_image | img_url: '4096x' }} 4096w,{%- endif -%}
            {{ media.preview_image | img_url: 'master' }} {{ media.preview_image.width }}w"
    sizes="(min-width: 750px) calc(100vw - 22rem), 1100px"
    src="{{ media.preview_image | img_url: '1445x' }}"
    alt="{{ media.alt | escape }}"
    loading="lazy"
    width="1100"
    height="{{ 1100 | divided_by: media.preview_image.aspect_ratio | ceil }}"
    data-media-id="{{ media.id }}"
    {% if variant_image %}class="product__media-item--variant"{% endif %}
  >
{%- else -%}
  {%- if media.media_type == 'model' -%}
    <div class="product-media-modal__model" data-media-id="{{ media.id }}">
      <product-model class="deferred-media media media--transparent" style="padding-top: min(calc(100vh - 12rem), 100%)">
  {%- else -%}
    <deferred-media class="deferred-media media" style="padding-top: min(calc(100vh - 12rem), {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%)" data-media-id="{{ media.id }}">
  {%- endif -%}

    {% if media.media_type != 'video' %} 
    <button id="Deferred-Poster-Modal-{{ media.id }}" class="deferred-media__poster" type="button">
      <span class="deferred-media__poster-button motion-reduce">
        {%- if media.media_type == 'model' -%}
          {%- render 'icon-3d-model' -%}
        {%- else -%}
          {%- render 'icon-play' -%}
        {%- endif -%}
      </span>
      <img
        srcset="{% if media.preview_image.width >= 288 %}{{ media.preview_image | img_url: '288x' }} 288w,{% endif %}
                {% if media.preview_image.width >= 500 %}{{ media.preview_image | img_url: '500x' }} 500w,{% endif %}
                {% if media.preview_image.width >= 576 %}{{ media.preview_image | img_url: '576x' }} 576w,{% endif %}
                {% if media.preview_image.width >= 550 %}{{ media.preview_image | img_url: '550x' }} 550w,{% endif %}
                {% if media.preview_image.width >= 1100 %}{{ media.preview_image | img_url: '1100x' }} 1100w{% endif %}"
        src="{{ media | img_url: '550x550' }}"
        sizes="(min-width: 1200px) calc((1200px - 10rem) / 2), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
        loading="lazy"
        width="576"
        height="{{ 576 | divided_by: media.preview_image.aspect_ratio }}"
        alt="{{ media.preview_image.alt | escape }}"
      >
    </button>
    {%- endif -%}
      
    {% if media.media_type != 'video' %}    
    <template>
    {%- endif -%}
    
      {%- 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' -%}
      	{%- liquid

        assign videos = product.media | where: "media_type", "video" 
      	assign video_url = videos[0].sources[1].url 
      	echo '<video autoplay loop muted playsinline width="100%"><source src="' 
        echo video_url
        echo '" type="video/mp4"> </video>'

		-%}
      {%- when 'model' -%}
        {{ media | media_tag: image_size: "2048x", toggleable: true }}
      {%- endcase -%}

    {% if media.media_type != 'video' %} 
    </template>
    {%- endif -%}

  {%- 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
        >
        {% render 'icon-3d-model' %}
        {{ 'products.product.xr_button' | t }}
      </button>
    </div>
  {%- else -%}
    </deferred-media>
  {%- endif -%}
{%- endif -%}

Thats works fine for me.
And don't forget to try my App "Gerda Analytics"

Hope you will enjoy it;)

[siwsoon]

Hey,

I have the same goal. I would like to embed lopped and soundless video into my main page, exactly the same as on Burrow's website:  https://burrow.com/nomad-fabric/sofa-sectional?sku=NSC-CG-3-MD-DW&tufted=TF (scroll down a little to see section "Durable enough to everyday drama"

I am new to coding and Shopify so I would really appreciate it if can you explain it to a 5year old. Where I should paste the URL of the video I uploaded to the Shopify files section.

I also use DAWN 2.0 template.

Many thanks in advance!

Nick

[vertalm]

Hello

Ok, try this solution
First of all open your online store Themes themplate and click customize

Then at left menu click Add Section

Chooses "Custom Liquid"

And paste this code

<video width="100%" class="" loop="" playsinline="" autoplay="" muted="" preload="auto">
        <source type="video/mp4" src="https://gerda.life/img/short.mp4">
</video>

Don't forget to replace "https://gerda.life/img/short.mp4" in src to your video link.

[siwsoon]

Thank you so much for your help and so quick reply!

It works! But now I would like to be able to do 2 things: 

A) Make it smaller let's say 60%, which I managed to do, but the video is aligned to the left instead of being centered. So my first question is: how to center smaller video.

B) Another question would be about adding a text nest to it, in the same way, you could see at burrow.com. So, a smaller video on the left (with or without margin) and text to the right of this video.

[vertalm]

I think you are looking something like this
https://stackoverflow.com/questions/34509273/two-columns-centered-content-with-divider

[macdidilin]

Hi, link from vimeo or youtube wont work here correct? If so, how should I link the video? Thanks in advance!

[siwsoon]

One way is to upload to Shopify: Settings > Files > Upload files. The only drawback is you can upload here file with a max size of 20MB... which for me is not enough, however, maybe for you will be fine.

PS. If someone knows where to upload bigger size videos, please share with us! 🙂

[vertalm]

I am using google cloud.

I rent a server there and store files

[femme32]

Thank You so Much, this code worked perfectly. 

[JustTicking]

The solution worked perfectly for my store! Thanks for the help Vertalm!

[MojoPrints]

Hi, Can someone please tell me what Shopify theme Burrow.com is using? I am fed up with Dawn and am looking to change. The video issue is only one of many lacking features with Dawn in my opinion.

[jphg]

@vertlam ‎10-27-2021

thanks

I haven't tried anything with your second code yet because I had stuff to do and your code was to big for me to understand.

So : can I paste the two codes at the end of each of the files "product-thumbnail.liquid" and "And product-media.liquid"?

Or must I specifically target a place in those codes (.liquid) to paste your code ?

Thanks for the info !

Jean-Philippe

[vertalm]

This is full code pages
Just replace your code to my

But be careful.

If you have any changes already in your code, some applications are installed, then something may break.

[jphg]

@vertalm

Well, that works, thanks. The videos autoplay in the product pages.

But the auto playing at the hover of the thumbnail still not. 😕

You have something for this or I missed a post?

Thank you

JP

[vertalm]

Hello

What do you mean?
Hover on another pages?
May be an example, or can you show page of your store?

[jphg]

@vertalm 

I can share my shop, I made it live today

strombolini.shop

The question was about the autoplay on hover in "featured collection" if you had selected that option.

For now, the hover shows the 2nd image, which is a video, but does not plays it… 😕

[vertalm]

Im not shure, but...

For now product pages video working fine at your store.
If you would like to add video block to another pages then please try this solution

1. Add custom liquid with such code

<video autoplay="" loop="" muted="" playsinline="" width="100%"><source src="https://cdn.shopify.com/s/files/1/0559/3186/3238/files/vera_video.mp4" type="video/mp4"> </video>

2. Upload your video throught this interface https://www.shopify.com/admin/settings/files
3. Copy the link
4. Replace this link https://cdn.shopify.com/s/files/1/0559/3186/3238/files/vera_video.mp4 to url of your video file.

Hope it helps.
Sorry if i don't undesrstand question. Your site French, my native language Russian and my level of English not so good)))

[jphg]

@vertalm 

Lol !

I join a screenshot. 

Below, the homepage. I took the screenshot while on rollover on the first product image in that featured-collection section.

Below is the screenshot of the parameters of that section in the admin of the site.

I wondered, while I activated the display of the second product image on hover ("afficher la deuxième image en survol"), that image - which is a video - did not auto play.

🙂

but, again I maybe mix threads in shopify help… I think i will get a rest now. 

 

[vertalm]

Ahh, ok, i see.
Actually yes, my code doesn't activate video in such case.
Will think about that

[ZainMoosani]

Thank you so much, Thats worked fine for me.. I have scenario can you please help me on that?

I have 5 pictures having 2 variants

assign 1 image to 1 variant and assign another image to another variant.

Total Pictures are showing 4 for each product and when we can the variant  the image is changed and the rest 3 image visible to both variant

is it possible to show all 5 pictures but when we choose variant the display picture change to assign product

Thanks

[amaris]

Thankyou

This worked for me on the website but on my phone the video autopays, but there is still a pause icon do you know how go get rid of it?

Thanks

[archimed]

Hello,

I'm trying to loop and autoplay videos on my product page, I've tried with your code but unfortunately, I couldn't make it work.

this is my product page with video in it.https://ggbys7u5vt2jaujw-68210557218.shopifypreview.com/products/cappotto-otello-doppiopetto-in-lana...

Can you help me figure out how to do it?

Thank you so much!

[Username_Chris]

I have added this to new Dawn theme but my product video's on mobile view are now out of line with images. Any advice?

[queenandcollect]

Can anyone help me with this please?