Is it possible to have an embed auto size to content?

Ask us anything
1

Hey folks, I’m using an embed to display dynamic data. I cannot figure out how to make the height of the embed block dynamically match the content.

So for instance, I’ll have a loom video appearing on one page, and a tally form appear on the other. I can’t get the embed height to automatically match both of them, which means the tally form has a scrollbar and it’s easy to miss the “Submit” button. The data within the field is just a basic link to the video / form, with no additional embed code.

Any help appreciated, I’ve played around a lot trying to make it work!

2

Could you share a screenshot?

3

Absolutely -

image
image1712×1138 139 KB

What we’re looking at here is a collection that is displaying a list of embeds, which are uploaded by users. There are two items visible - a video made in Loom, and a form made in Tally.

Right now, I can’t get WeWeb to understand the height of the individual items - so I can set the height to be non dynamic to work for the Loom, but then you can see the Tally is cut off and the user has to scroll. Or I can make the height fit the Tally, but then there’s loads of space after the Loom.

  • The embeds are just the link, eg loom.com/23492340, they don’t include any of the iframe information (eg height etc.)
  • I’ve tried pretty much every setting when it comes to adjusting the height automatically to the content, but it feels like WeWeb can’t find the height of the original item.
  • One thought I had was simply to get the users to add something like “&height=100” to the URL of the embed and extract that as the height, or similar. But haven’t tested that yet.

Any suggestions or workarounds appreciated!

4

Are you just looking to apply a proper height to the iFrame video component ? Or is there another problem (i tried reproducing it quickly) Have you tried just appliying the width you wanted and the height to ratio & ratio to 16:9 ? Seems to work fine on my side but may be i didn’t get the whole problem.

5

I want the iframe height to be based off the height of the item that is being embedded. EG for a video, it should be about 400px (16:9 ratio, as you say), but then when I embed a form which is a lot longer it should automatically scale the height of the embed object to match the form, rather than expecting a user to scroll.

Right now I can get the embed to match the height of one or the other, but not both :frowning: