How to remove padding around videos in Product Gallery?

Follow

Nicholas White

• October 01, 2020 18:05
• Edited

I've tried so many different thing but can't get anything to work:

Images work fine - they are exactly the same height as the gallery itself.

The problem comes when adding videos into the gallery - it adds a massive amount of padding around it.

This becomes a real problem when trying to create a nice design with text right underneath the gallery.  Because of this padding there is a massive gap.

It can even be seen in Cloudinary's own example here (the fashion gallery)

https://support.cloudinary.com/hc/en-us/articles/360024054151-Adding-Cloudinary-s-Product-Gallery-to-Your-Website

 

Help greatly appreciated!

0

• 

  Loic Verger Del Bove

  • October 02, 2020 15:46

  Hi Nicholas,

  Thanks for reaching out.

  You can apply transformations to the video as documented here: https://cloudinary.com/documentation/product_gallery#applying_transformations

  If you want the video to fill the gallery size, you can use `crop:fill` in the transformation like this:

  mediaAssets: [
  
    { tag:"electric_car_product_gallery_demo"},// by default mediaType: "image"
  
    { tag:"electric_car_product_gallery_demo", mediaType:"video"
  
      ,transformation:{
  
        crop:"fill"}
  
      },
  
    { tag:"electric_car_360_product_gallery_demo", mediaType:"spin"}
  
  ]

  You can find an example in ReactJS here: https://codesandbox.io/s/helloworld-forked-yz8wd?file=/src/App.tsx 

  Hope it helps.

  Best,

  Loic

  0

  Comment actions Permalink
• 

  Nicholas White

  • October 05, 2020 16:03

  Thank you so much.  I now have the perfect sizing, but unfortunately my video quality is poor.  Is there a way to set video quality?

  The asset is only 20MB, looks fine when access via standard Cloudinary URL but low quality when played via the product gallery.  It's not being skewed, as I've been very careful to edit file as 4:£ ration and also set a 4:3 for the product gallery.  But the quality is extremely low, very noticeable.

   

  Thanks

  0

  Comment actions Permalink
• 

  Nicholas White

  • October 05, 2020 16:23

  Ah, I've now seen how to override the automation DPR that is given to the video, but I have to say that the auto-detect DPR doesn't seem to be working for desktop, as the quality really is quite poor.

  0

  Comment actions Permalink
• 

  Daniel Mendoza

  • October 05, 2020 21:44

  @Nicholas Automatic DPR does not work for video as this is only for images. Can you open a ticket internally with us and share your video URL? I want to see what the video looks like. You can open one here: https://support.cloudinary.com/hc/en-us/requests/new

  0

  Comment actions Permalink
• 

  Nicholas White

  • October 06, 2020 09:23

  Thanks Daniel, I've opened a ticket #132272

  0

  Comment actions Permalink
• 

  Nicholas White

  • October 06, 2020 15:50

  Also, this article specifically states that within the product gallery DPR is used for video and that the DPR can be changed via a transformation.  

  https://cloudinary.com/documentation/product_gallery

   

  Is the article out of date, because you are saying this cannot be done?

  Thanks

  0

  Comment actions Permalink
• 

  Daniel Mendoza

  • October 07, 2020 20:54

  That's a different kind of dpr_auto, that is only handled exclusively with the product gallery widget and not our responsive library. The product gallery widget, does appear to work, can you explain in further detail how you are seeing that it doesn't?
  
  

  In my tests I am getting dpr_2.0 and not dpr_1.0 (which is the default). I do not have a device that will do dpr_1.0, but I am looking to see if I can find one.

  0

  Comment actions Permalink

Post is closed for comments.