Hi, Theme: Dawn 2.0 (Version 6.0) I have a brand that provides short 9second clips of products worn on models. Id like to achieve two things. When a product is hovered, a secondary image appears, id like the video to be on the collection page as the secondary image that will autoplay on hover. …

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-e…

It works in Dawn Theme, I recently changed the theme. I cann’t find the same code…How can I make it work in my new theme “Lorenza”?

There is no hover on handheld devices

Awesome, dude! Seeing that I’m not the only one trying to autoplay product video on collection pages, I took the liberty to slightly change the code so that it’s possible to have product images and videos in any order.

Hi! It works great, thanks for the tip. The issue I’m dealing with, it loads and plays all videos in the page in the background. Is it possible to make videos only load and play on hover and pause when the mouse isn’t over the thumbnail?

Ya should be possible with a javascript function that pauses all videos then creates an on mouse-enter event on the product card that plays the video.

I am looking to do this as well, however I am using theme “Crave” does this same code apply?

I’m not familiar with the crave theme, but as a Shopify theme it should use Dawn as its base and therefore the class names should be the same. Easiest thing to do to check is to duplicate your theme and then follow the first part of each of the instructions, go to the file and search for the tag tha…

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

Store Design

trnngctu March 19, 2023, 6:50am 4

It works. Thank you very much

Topic		Replies	Views
Autoplay the product video when hover on the product items Store Design design , customizations	1	85	September 7, 2023
Impulse theme - Autoplay A Product Video On Product Hover On Collection Page & Product Page Store Design design , customizations , collection-page , shopify-themes , product-page	1	71	January 22, 2024
Video autoplay on hover in the featured collection section Technical Q&A javascript , css , html , shopify-theme	2	75	August 21, 2024
Video as front Ask & Offer	3	62	June 2, 2026
Autoplay Product Video on Hover on Featured Products & Product Page Store Design liquid , design , collection-page , css , product-page	1	114	February 13, 2025

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

Related topics