Autoplay a product video on product hover on collection page & product page.

Store Design
3

This is possible with videos with no sound as your browser will block autoplay videos with sound.

For this solution, the product video needs to be the second media item of the product.

in base.css find

.media.media--hover-effect > img + img

and replace this code block with

.media.media--hover-effect > img + img,
.media.media--hover-effect > img + video {
  opacity: 0;
}

In component-card.css find

.card__media .media img

and replace code block with

.card__media .media img,
.card__media .media video {
height: 100%;
object-fit: cover;
object-position: center center;
width: 100%;
}

Find

card-wrapper:hover .media.media--hover-effect >img+img

and replace code block with

.card-wrapper:hover .media.media--hover-effect > img + img,
.card-wrapper:hover .media.media--hover-effect > img + video {
  opacity: 1;
  transition: transform var(--duration-long) ease;
  transform: scale(1.03);
}

In card-product.liquid search

motion-reduce

you will see two image tags next to each other replace the second img tag with the following

{%- if card_product.media[1] != null and show_secondary_image -%}
{% liquid
assign alternateMediaIsVideo = false
if card_product.media[1].media_type == 'video'
assign alternateMediaIsVideo = true
endif
%}

{% unless alternateMediaIsVideo %}

{% else %}
{{
  card_product.media[1]
  | video_tag:
  controls: false,
  muted: true,
  loop: true,
  autoplay: true,
  image_size: '1066x',
  class: 'motion-reduce'
}}
{% endunless %}
{%- endif -%}