How to add preview image or thumbnail for product video

Shopify Discussion
1

I have display the product images and video of products on my homepage.

product image working fine, but product video is blur after click on play video working fine. so i want to add preview image or thumbnail for video section.

current code

{% case media.media_type %}
  {% when 'external_video' %}
    <div class="product-media-type product-single__media" data-media-id="{{ media.id }}">
      {{ media | external_video_tag }}
    </div>
  {% when 'video' %}
    <div class="product-media-type product-single__video" data-media-id="{{ media.id }}">
      {{ media | video_tag: autoplay: false, loop: true, muted: true, controls: true }}
    </div>
{% endcase %}

<div class="row">
<div class="col-lg-12 col-md-12">
{% for media in product.media %}
{% render 'homemediavideo', media: media %}
{% endfor %}
</div>
</div>

innois_1-1719297154038.png
innois_1-1719297154038.png1366×768 206 KB

2

Hello @innois
If you want to add preview image or thumbnail for product video, you can use the poster attribute of the HTML video tag. This allows you to specify an image that will be displayed before the video starts playing.
The code will have logic like this:

{% when 'video' %}

{% if media.preview_image %}
{{ media | video_tag: autoplay: false, loop: true, muted: true, controls: true, poster: media.preview_image.src }}
{% else %}
{{ media | video_tag: autoplay: false, loop: true, muted: true, controls: true }}
{% endif %}

Check if the variable ‘media’ has the value ‘preview_image’ or if it has another name.

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you