Thanks a lot for this solution. I can confirm that it works perfectly fine for the Dawn 8.0 theme as well. I would advise to recreate the HTML structure to mimic product cards and utilize the same classes though. Super flexible and cool solution! Thanks a bunch!
For reference, this is my code using the Dawn theme. Super easy to make it all controllable through customizer settings as well as to switch between 1 and 2 column width, depending on the video.
Main-collection-product-grid.liquid
{%- for product in collection.products -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
{%- assign lazy_load = true -%}
{%- endif -%}
{%- if forloop.index == 2 and paginate.current_page == 1 -%}
- [
](https://nordic-ergo-2-0-dawn.myshopify.com/collections/kontorstole)
[
](https://nordic-ergo-2-0-dawn.myshopify.com/collections/kontorstole)
{%- endif -%}
CSS to make it fill out the entirety of a product card element
video.fullscreen-video {
position: absolute;
z-index: 0;
object-fit: cover;
width:100%;
height:100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius:var(--product-card-corner-radius);
&::-webkit-media-controls {
display:none !important;
}
}
Result:
