Keeping proportions of Plyr plugin inside RG

[valentinrichrd]

Hi there,

First things first, thanks for your outstanding work with all these plugins.
I’ve been struggling with an issue for weeks now and I need some help with the Plyr plugin.

In my app, I’m using Vimeo players in a repeating group as such:

Right now, they’re a simple HTML element containing an iframe with the vimeo player, but I need to be able to interact with them through other parts of my app and trigger bubble events when they play/stop etc.

In my HTML, I checked the “keep element proportions as the page is resized” box, making it look great on all sizes of devices.

When I try to replace it in the Bubble editor with the plyr element (same size), like this:

The result display is this:

I can write CSS but after many hours lost trying to figure out where that big height space comes from and trying to find workarounds, I decided to ask you if you had an idea.

Thanks!

[Greg.P]

Hi @valentinrichrd, thank you for your message, and thanks for using our Plyr plugin

As per the information you have shared, I have tried to replicate your use case on our test page. Currently, there is no issue with the spacing between Vimeo video element (Plyr plugin) and the below text element in my test page.
I can recommend you to the same setup: group the plugin element and the text element in one group then place it inside the repeating group. Please check the below screenshots for reference:

Screenshot

Screenshot

In case this resolution is not useful for your case, please share more details with screenshots from your editor so we can replicate it and help you out.

[valentinrichrd]

Hi! Thanks for your answer. Unfortunately, it didn’t solve my problem.

I do have a group “objective-card” that contains several things:

• a sub-group “video-container” that itself contains my Plyr VimeoVideoB
• a text
• another sub-group ‘orb-group’ containing the round button

If, like above, I remove the Plyr element and replace it by a shape with the “keep element’s proportions” box checked, it looks like this:

However, if I uncheck the “keep element’s proportions” of the shape, it looks like this:

If I add the Plyr back, with or without the Shape, it has the same rendered height:

My guess is if the content of that group doesn’t have fixed proportions (like html or shape), its height automatically adjusts to something else, and not the 16:9 ratio I need for my app. I don’t think it depends on the Plyr itself less than the fact I cannot fix its proportions.

Any idea about how I could fix it?

[Greg.P]

Hi @valentinrichrd, thanks for sharing the screenshots with your setup

I would recommend you to try and separate the ‘video-container’ group from the ‘objective-card’ group and see if that makes any difference on your side. As well, please make sure you got the latest plugin version installed on your side as this also might affect the plugin’s behaviour.

Let me know if that worked for you.
In case you are still experiencing any issues with the plugin, in order to perform a few tests, can you please add our support@zeroqode.com account to the Collaborator’s list of your application (with edit rights - to be able to perform tests on the separately created page)? Please ignore the warning message - our account is on an Agency plan and anyone can add us to the Collaborator list.

Waiting for your reply!