Dawn 2.0 version 2.4.0 auto play mp4 video on product single page

[Juhri]

As I mentioned please guide me to make the mp4 video autoplay in product single page. 
At the moment I have to click on play icon to play the video.

[Savior]

@Juhri 

Hello 

Video autoplay is done by adding javascript. 

It depends which type of video you are using all thre types of video(vimeo/youtube/uploaded) have different javascript. You need to hire a developer for this if you are not good with codes and script.

If helpful please like and accept as solution. For any queries DM me or mail at shopify.dev.34@gmail.com

[PaulNewton]

Current Dawn version should be autoplaying video on the product page media

https://github.com/Shopify/dawn/blob/main/snippets/product-media.liquid#L77

Otherwise you must add the autoplay attribute to the video html element by finding the appropriate area of html code or liquid code in the product templates ,sections or snippets.

For code like the following this is done by adding a autoplay parameter

Before

{{ media | media_tag: image_size: "2048x", loop: loop, controls: true, preload: "none" }}

After

{{ media | media_tag: image_size: "2048x", autoplay: true , loop: loop, controls: true, preload: "none" }}

For dawn this should be snippets/product-media.liquid

[Guleria · Accepted solution]

Hello @Juhri ,

I applied same thing to one of my client a day before and in same version.

I hope provided instructions will helpful for you.
1) Edit base.css under 'Assets' And paste this css code at bottom

.product-section video {
    width: 100%;
}

2) Edit product-thumbnail.liquid under 'Snippets' and  replace its whole code with the below code.

{% 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
    %}
{% 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 >= 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 %}
          {{ media.preview_image | img_url: 'master' }} {{ media.preview_image.width }}w"
        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 >= 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 %}
          {{ media.preview_image | img_url: 'master' }} {{ media.preview_image.width }}w"
        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>
{% if media.media_type != 'video' -%}
<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>

  <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 >= 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 %}
        {{ media.preview_image | img_url: 'master' }} {{ media.preview_image.width }}w"
      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>
</modal-opener>
{% endif %}
{%- 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 if media.media_type == 'video' -%}
      {%- liquid
      echo media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none", autoplay: true
  		-%}
  {%- 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 >= 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 %}
        {{ media.preview_image | img_url: 'master' }} {{ media.preview_image.width }}w"
      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 %}
  <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_old'
        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>

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

Keep note if you want to implement similar to your collection loop grid or in homepage collage section then you have to modify those sections templates. 

btw still if you find any issue you can drop me an email and we can discuss further.

Thanks

[Juhri]

Thanks @Guleria to helping me again. It works like a charm 
Please check your PayPal 

😋