How to add preview image or thumbnail for product video

Shopify Discussion

Topic summary

A user is experiencing an issue where product videos display as blurry thumbnails on their homepage until the play button is clicked. They want to add a proper preview image or thumbnail for the video section.

Current Problem:

  • Product images work correctly
  • Videos appear blurred before playback
  • Video plays fine once clicked

Proposed Solution:
A support representative suggested using the poster attribute in the HTML video tag to specify a preview image. The recommended approach involves:

  • Checking if media.preview_image exists
  • Adding the poster parameter to the video_tag filter
  • Using poster: media.preview_image.src to display the thumbnail before playback

The solution modifies the existing Liquid code to conditionally render videos with preview images when available. The discussion appears to be awaiting confirmation from the original poster on whether this solution resolves their issue.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
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