How can i auto play videos in Dawn theme?

Danish864
Excursionist
16 0 4

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

Replies 26 (26)
Shopi5_Coders
Explorer
36 5 8

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
Excursionist
16 0 4

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
36 5 8

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
LukePlayhood
New Member
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
New Member
1 0 0

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

Shopi5_Coders
Explorer
36 5 8

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
Shopi5_Coders
Explorer
36 5 8

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
vertalm
Excursionist
12 0 5

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