Product video autoplay on hover (hosted externally)

[FilmBro]

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.

[Ihor-Sh · 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.

[FilmBro]

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

[EetuJokitalo]

Hi @FilmBro

We made an app that does exactly this, if you are still interested. 

https://apps.shopify.com/hovr-video-on-hover?st_source=autocomplete

[FilmBro]

Nice! we did custom code it because we didn't know that this was an option.