FROM CACHE - en_header

How can i auto play videos in Dawn theme?

Danish864
Excursionist
21 1 6

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

Replies 31 (31)
Shopi5_Coders
Explorer
40 5 9

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
21 1 6

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 9

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
40 5 9

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
40 5 9

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

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 12

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
New Member
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 12

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
New Member
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 12
Danish864
Excursionist
21 1 6

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
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
New Member
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! 🙂

 

 

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 12

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.