How to remove padding around videos in Product Gallery?
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)
Help greatly appreciated!
-
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
-
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
-
@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
-
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
-
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.
Post is closed for comments.
Comments
7 comments