Keep proportions of group with content

Hello there!

I’m currently struggling with some group proportions issues.

I have this card. The card contains a group, video-container, that until now, contained an html element set to “Keep element proportions as the page is resized”, itself containing a Vimeo iframe.

The important part is that my group video-container is resized accordingly to my html element ratio, giving it the right height no matter my screen size.

Now, I’m trying to swap this html element with the Plyr plugin by Zeroqode. That element, contrary to the html element, doesn’t have a “Keep element proportions […]” in its properties.

So when I put it in, my video-container group doesn’t resize according to any ratio, but by the classic responsive grid of Bubble, and my video ends up on top of a big-height empty group.

The problem doesn’t come from the video player itself, because here’s another usecase:
if I fill my video-container group with a grey shape set to keep the proportions, here’s the result:


GREAT SUCCESS

Now, if I had any other content in my group than that shape, say a text:

Then my group goes back to its natural behaviour, ignores the proportions constraints set by the shape, and my group is all high and tall again.

I’m losing my mind over this, does anyone have a suggestion about what I could do? I can write CSS, JavaScript, anything as long as it doesn’t make my app too clunky and ugly.

Thanks so much and for everything I’ve learnt on this forum so far :slight_smile:

+1 for locking proportions