Re: How can i auto play videos in Dawn theme?

How can i auto play videos in Dawn theme?

Danish864
Shopify Partner
57 4 10

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

Replies 36 (36)

Shopi5_Coders
Explorer
40 5 10

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>
If you liked the help we provided then accept the solution and like it.
Want to hire us? or visit our website and Get a free quote
Danish864
Shopify Partner
57 4 10

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
Explorer
40 5 10

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.

If you liked the help we provided then accept the solution and like it.
Want to hire us? or visit our website and Get a free quote
Danish864
Shopify Partner
57 4 10

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
Visitor
3 0 0

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

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

Shopi5_Coders
Explorer
40 5 10

Hello @jerseycitykicks 

 

Please send URL to your store. 


If you liked the help we provided then accept the solution and like it.
Want to hire us? or visit our website and Get a free quote
Shopi5_Coders
Explorer
40 5 10

Hello @LukePlayhood 

Please send your URL

If you liked the help we provided then accept the solution and like it.
Want to hire us? or visit our website and Get a free quote
aprilp777
Visitor
2 0 0

Hi There!

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

 

kvyz
Shopify Partner
1 0 0

This worked perfectly for me, thank you! 😁

vertalm
Shopify Partner
18 0 14

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
Excursionist
30 0 7

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
Shopify Partner
18 0 14

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
Visitor
3 0 0

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
Shopify Partner
18 0 14

Hello

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

vertalm_1-1635595034102.png

Then at left menu click Add Section

vertalm_0-1635594977542.png

Chooses "Custom Liquid"

vertalm_2-1635595140424.png

 

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
Visitor
3 0 0

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.

 

Screenshot 2021-10-30 at 14.35.42.png

vertalm
Shopify Partner
18 0 14
macdidilin
Tourist
5 0 2

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

siwsoon
Visitor
3 0 0

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
Shopify Partner
18 0 14

I am using google cloud.

I rent a server there and store files

femme32
Visitor
1 0 0

Thank You so Much, this code worked perfectly. 

JustTicking
Visitor
2 0 0

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

MojoPrints
Visitor
1 0 0

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
Excursionist
30 0 7

@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
Shopify Partner
18 0 14

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
Excursionist
30 0 7

@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
Shopify Partner
18 0 14

Hello

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

jphg
Excursionist
30 0 7

@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
Shopify Partner
18 0 14

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
Excursionist
30 0 7

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

Capture d’écran 2021-11-10 à 16.17.50.png

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. 

Capture d’écran 2021-11-10 à 16.20.41.png

vertalm
Shopify Partner
18 0 14

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

ZainMoosani
Tourist
6 0 1

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

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
Tourist
11 0 4

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
Visitor
3 0 0

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
Visitor
2 0 0

Can anyone help me with this please?