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

Retired Boards Appdev Store Design
1

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.

2

@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

3

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

4

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%;
}
  1. 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 %}

{% if media.media_type != 'video' -%}

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

1 Like
5

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

:face_savoring_food:

1 Like