How to add a video as product images

In the product page, Squarespace only allows us to add image formats (png, gif, jpg...) to the product image section. Is there any way to pull it off with or without coding?

thank you very much. Indeed I am trying to show the video, when you hover over the image. The only way I know to make it is to add the second image as video or a gif file. 

Can anyone help me replace the Product Image with a Video?

I've tried several workarounds, but to no avail. If it's indeed possible to feature a video in place of the image, that would be best, but I won't assume it's an easy customization. So, a compromise we could probably live with would be to use the Additional Info block to include a video, and then move the Additional Info block to the very top of each of the Product pages, i.e. above both the product info and product image. (Full page width is fine for the video; if only it were possible to add a section to the top of a product page!)

If you visit http://peoplepoweredgiftcards.com/marketplace/p/viewpoint-brewing-co you will see that I've added an Additional Info block (in this case an embedded video). So, that's my starting point. Any help would be much appreciated. Thanks in advance!

On 2/9/2023 at 8:55 AM, dadocinqo said:

Can anyone help me replace the Product Image with a Video?

I've tried several workarounds, but to no avail. If it's indeed possible to feature a video in place of the image, that would be best, but I won't assume it's an easy customization. So, a compromise we could probably live with would be to use the Additional Info block to include a video, and then move the Additional Info block to the very top of each of the Product pages, i.e. above both the product info and product image. (Full page width is fine for the video; if only it were possible to add a section to the top of a product page!)

If you visit http://peoplepoweredgiftcards.com/marketplace/p/viewpoint-brewing-co you will see that I've added an Additional Info block (in this case an embedded video). So, that's my starting point. Any help would be much appreciated. Thanks in advance!

I'm a bit late but yes, you can accomplish this with our Product Gallery Video Plugin.

On 2/9/2023 at 7:55 AM, dadocinqo said:

to use the Additional Info block to include a video, and then move the Additional Info block to the very top of each of the Product pages

Hi, not sure if you ever solved this. I just came up with a solution for a client that works perfectly. If you add a video block in the Additonal Info section, this code pops the video above your image gallery. You need to add it to your sitewide Code Injection, in the Header Code area:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $(".sqs-block-video").insertBefore('.ProductItem-gallery-slides');
  });
</script>

You can see the result live here: https://ademiboutique.squarespace.com/shop/paris. This is a 7.0 Brine site but as far as I can tell should work the same on 7.1. I can only vouch for it working with a single video block in the Additional Info section. Hope this helps though it was a while ago you asked the question!

On 9/27/2023 at 3:40 PM, Inscape said:

Hi, not sure if you ever solved this. I just came up with a solution for a client that works perfectly. If you add a video block in the Additonal Info section, this code pops the video above your image gallery. You need to add it to your sitewide Code Injection, in the Header Code area:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $(".sqs-block-video").insertBefore('.ProductItem-gallery-slides');
  });
</script>

You can see the result live here: https://ademiboutique.squarespace.com/shop/paris. This is a 7.0 Brine site but as far as I can tell should work the same on 7.1. I can only vouch for it working with a single video block in the Additional Info section. Hope this helps though it was a while ago you asked the question!

Hmm... this didn't work for me, but I wonder if it's the new site style (I created my site in May 2023 I think)... 

If anyone has follow-ups on making this work on the latest version of Squarespace, I'm all ears! Thanks.

On 11/15/2023 at 8:40 AM, dianeceramics said:

wonder if it's the new site style

Thanks for the update, @dianeceramics. I never did test this on a 7.1 site, so could be it only works on 7.0.

On 9/28/2023 at 8:40 AM, Inscape said:

I just came up with a solution for a client that works perfectly.

It kind of works for me but only when I refresh the page. When I first open the product page it doesn't look like anything has changed but then I refresh the page and the video goes to the top. This is the experience every time I open the product - it needs to be refreshed. Is this just a caching issue or am I experiencing an issue?

On 4/17/2024 at 6:58 PM, dillon said:

It kind of works for me but only when I refresh the page.

Do you have Ajax loading enabled on a 7.0 site? If you do, that's why it doesn't work. You will need to disable Ajax loading in order to make it work.

Hi there,

I keep getting a message that the video (.mp4) will not load and to try again later. After trying several times I got frustrated and decided not to include a product video in additional information. Now I'm getting this error when I try to save the product page: An unexpected error occurred. Please try again later.

As you can see, the video uploads perfectly here...