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

Solved

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

MrGrif
Shopify Partner
23 2 7

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.

1) 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. 

2) When a customer clicks the product, they need to click play to play the video, id prefer if the short clip was autoplayed.

Any ideas of where to begin in the code section to achieve the above ? 

Ive tried placing off autoplay="true" but I can't seem to find where to place it as Im not seeing html for video in product page. 

MrGrif
Accepted Solutions (3)
pete_soc
Shopify Partner
16 2 11

This is an accepted solution.

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

 

 

View solution in original post

LVC
Tourist
7 1 6

This is an accepted solution.

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.

View solution in original post

pete_soc
Shopify Partner
16 2 11

This is an accepted solution.

Replies 26 (26)

Elissa_Paquette
Tourist
6 0 1

SAME!

pete_soc
Shopify Partner
16 2 11

This is an accepted solution.

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

 

 

trnngctu
Tourist
10 0 3

It works. Thank you very much

A new solopreneur
Shih-yin
Visitor
1 0 0

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"?

 

jellyfishprinta
Visitor
2 0 0

will this work on mobile? 

pete_soc
Shopify Partner
16 2 11

There is no hover on handheld devices

LVC
Tourist
7 1 6

This is an accepted solution.

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.

solindigital
Visitor
1 0 0

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?

pete_soc
Shopify Partner
16 2 11

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.  

spinnermation
Visitor
1 0 0

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

pete_soc
Shopify Partner
16 2 11

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 that will be replaced if all the tags are there id give it a shot, but if you are not familiar with code and you hit a snag you'll need a coder.

RadionPoints08
Visitor
3 0 0

Is these work on Product card ??

 

 

xcsresources
Excursionist
13 0 3

The code definitely works to autoplay video OVER the main image. I'm looking for the video to play ONLY when hovering over the main image. Did anyone work this out?

 

Edited*

The code works. For some reason some of the coding didn't save so I had to redo it. Cheers

ariel108
Visitor
3 0 0

Hey Pete, thank you for sharing that. It works great on product cards, but unfortunately it doesn't work on product page. I still need to click play to play the video and I can see controls. Are you able to help me so that also works? I would appreciate it!

ariel108
Visitor
3 0 0

I managed to disable controls in product-thumbnail.liquid, but still I need to press play on video. 
I tried to mute the video, because that could potentially block the autoplay, but still that wasn't it. 

I noticed that it works on thumbnail carousel layout, but not on two columns layout (that I use on my store). 

 

pete_soc
Shopify Partner
16 2 11

This is an accepted solution.

Improved and updated version for dawn 13 in a Gist here

https://github.com/peterbrunton/shopify-gists/blob/main/product-card-rollover-video

glopilot
New Member
5 0 0

Fantastic! I added this.video.currentTime = 0; to the mouseleave and it works just how I want it to. Thanks!

enesakd
Tourist
4 0 0

It ruined my theme, all pictures disappeared on my Taste theme 😕Screenshot 2024-05-14 at 19.52.25.png

pete_soc
Shopify Partner
16 2 11

It's a different theme. You can revert your files.

enesakd
Tourist
4 0 0
How can i revert to the previous code? I contacted help center for this. 😕
pete_soc
Shopify Partner
16 2 11

Screenshot 2024-05-15 at 09.18.40.png

There's a 'Recent changes' drop down in the code editor, just roll it back to the last save before you added the code that will work for sections and snippets.
You should make code changes to offline themes, so duplicate your live theme and work off that if everything works then publish that theme.
There's plenty of resources online for stuff like this.

glopilot
New Member
5 0 0

Thiw worked great for me! Question: is there a way to have each video reset to the beginning when they are rolled off. At present the videos seem to be auto playing all the time, even when not rolled over. This creates the effect that sometimes when they are rolled over they are in the middle of the video, which is less that optimal. Thanks for any ideas!

pete_soc
Shopify Partner
16 2 11

the updated version here [https://github.com/peterbrunton/shopify-gists/blob/main/product-card-rollover-video]

plays on mouseenter and pauses on mouseleave

 

class RolloverVideo extends HTMLElement {
  connectedCallback() {

    this.video = this.querySelector('video');

    if (this.video) {
      this.video.muted = true;

      const cardWrapper = this.closest('.card-wrapper');

      cardWrapper.addEventListener('mouseenter', () => {
        if (this.video.paused) {
          this.video.play();
        }
      });

      cardWrapper.addEventListener('mouseleave', () => {
        this.video.pause();
      });
    }
  }
}

customElements.define('rollover-video', RolloverVideo);

 

 

iamabeginner
Excursionist
14 0 6

Thank you for the help. You're the DARK KNIGHT.

SK0809
Tourist
4 0 0

Thank You for the solution, it is really helpful, and it is fixed in one time only Thank You 

iamabeginner
Excursionist
14 0 6

I have been looking for it for a while. You are a savior.