Re: Product video autoplay on hover (hosted externally)

Solved

Product video autoplay on hover (hosted externally)

FilmBro
Tourist
4 0 1

Hi community,

 

I'm new to Shopify and have no clue how to achieve this.

 

I would like to have each product (which will be video templates) to have a thumbnail, and a video playing when the customer hovers over the thumbnail (only in desktop mode as this won't work in mobile).


I found two limitations

1. You can only upload so many videos to Shopify, depending on your plan (1000 videos on Shopify standard)

2. having a ton of products with videos that play on hover on my site, might make everything really slow.

 

That being said, I was thinking of hosting the video files on an external CDN and link them with a URL to each product.

This solution might solve the Shopify video limit, and it will probably make the website less slow.

Now, I'm not sure if this would be possible, and how I can code this, so that I can add the URL (of the externally hosted video) at the backend of each product.

Thank you in advance for your help.

Accepted Solution (1)

Ihor-Sh
Shopify Partner
79 11 17

This is an accepted solution.

Hi @FilmBro 
Upload video to external hosting.
Add new product metafield to store video url (maybe add other one to store thumb image)
Set condition in product section liquid to render thumb and video tags if metafield not empty.
Add styling.
Add js script to play video on hover.

Shopify troubleshootibility 😉
If you're satisfied with reply - don't forget to like it.
If you more than satisfied - mark it as solution 😉
You can find me here.

View solution in original post

Replies 2 (2)

Ihor-Sh
Shopify Partner
79 11 17

This is an accepted solution.

Hi @FilmBro 
Upload video to external hosting.
Add new product metafield to store video url (maybe add other one to store thumb image)
Set condition in product section liquid to render thumb and video tags if metafield not empty.
Add styling.
Add js script to play video on hover.

Shopify troubleshootibility 😉
If you're satisfied with reply - don't forget to like it.
If you more than satisfied - mark it as solution 😉
You can find me here.
FilmBro
Tourist
4 0 1

Thank you for the answer, great to hear that this is not a super complex thing to add.
Really appreciate your help on this.