Thanks for your work!
I made some changes based on your work that will work in the following way:
1. We can put the video in whatever location we want, it also doesn't matter where we put the images
2. What happens is we check if the first media item is an image, if not we search through the list of media items until we see an image and assign that to a local value
3. For the video we do something similair but we search through the media list until we find an item that is a video, we also assign that to a local value
4. We use these values to decide what needs to be displayed as "featured" item and as "hovered" item
5. I added some javascript to make sure the videos only play when you hover over the product and that it will reset every time in order to play from the start on each hover
This is the code in the card_product.liquid file
under the `assign ratio` section around line 28 we will add some new assigns. This block will look like this:
{%- liquid
assign ratio = 1
if featuredImage and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif featuredImage and media_aspect_ratio == 'adapt'
assign ratio = featuredImage.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
assign featuredImage = featuredImage
if featuredImage.media_type != 'video'
for item in card_product.media
if item.media_type == 'image'
assign featuredImage = item
break
endif
endfor
endif
assign featuredVideo = nil
for item in card_product.media
if item.media_type == 'video'
assign featuredVideo = item
break
endif
endfor
-%}
now do a search and replace on the page by using ctrl + f
enter: card_product.featured_media
and for replace: featuredImage
then replace the code for the first div below the first {%- if featuredImage -%} you find (should be around line 72 after adding the above code)
so replace the entire div with the code below
<div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
<div class="media media--transparent media--hover-effect">
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
<img
srcset="
{%- if featuredImage.width >= 165 -%}{{ featuredImage | image_url: width: 165 }} 165w,{%- endif -%}
{%- if featuredImage.width >= 360 -%}{{ featuredImage | image_url: width: 360 }} 360w,{%- endif -%}
{%- if featuredImage.width >= 533 -%}{{ featuredImage | image_url: width: 533 }} 533w,{%- endif -%}
{%- if featuredImage.width >= 720 -%}{{ featuredImage | image_url: width: 720 }} 720w,{%- endif -%}
{%- if featuredImage.width >= 940 -%}{{ featuredImage | image_url: width: 940 }} 940w,{%- endif -%}
{%- if featuredImage.width >= 1066 -%}{{ featuredImage | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ featuredImage | image_url }} {{ featuredImage.width }}w
"
src="{{ featuredImage | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ featuredImage.alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}
loading="lazy"
{% endunless %}
width="{{ featuredImage.width }}"
height="{{ featuredImage.height }}"
>
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
{%- if card_product.media[1] != null or featuredVideo and show_secondary_image -%}
{%- unless featuredVideo != nil -%}
<img
srcset="
{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
"
src="{{ card_product.media[1] | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt=""
class="motion-reduce"
loading="lazy"
width="{{ card_product.media[1].width }}"
height="{{ card_product.media[1].height }}"
>
{%- else -%}
{{
featuredVideo
| video_tag:
controls: false,
muted: true,
loop: true,
autoplay: false,
image_size: '1066x',
class: 'motion-reduce'
}}
{%- endunless -%}
{%- endif -%}
</div>
</div>
In order to make sure the autoplay works in the way as described in point 5 we add the following to the bottom of the page
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.card').forEach((video) => {
video.addEventListener('mouseover', function() {
var playItem = this.querySelector('video');
playItem.currentTime = 0;
playItem.play();
});
video.addEventListener('mouseout', function() {
this.querySelector('video').pause();
});
});
});
</script>
The css part is the same as in LVC's answer
