how to add preview image or thumbnail for product video

how to add preview image or thumbnail for product video

innois
New Member
8 0 0

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

 

Reply 1 (1)

BSSCommerce-TA
Shopify Partner
123 24 24

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' %}
<div class="product-media-type product-single__video" data-media-id="{{ media.id }}">
{% 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 %}
</div>

 

 

 

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 

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

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency