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

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

[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 @LukePlayhood

Please send your URL

[Shopi5_Coders]

Hello @jerseycitykicks

Please send URL to your store.

[vertalm]

Looks like this is bug in Down theme

But

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

To this one

{% if media.media_type != 'video' %}    
  
  {%- 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 %}

{%- if media.media_type != 'image' -%}
  {%- if media.media_type == 'model' -%}
    
    {%- if xr_button -%}
      
    {%- endif -%}
  {%- else -%}
    
  {%- 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' -%}
  
{%- else -%}
  {%- if media.media_type == 'model' -%}
    
      
      
    

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

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

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

[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!

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