Can't change the height and width for most of the social embeds

[timomak]

When I try setting the height or width to a social embed like so:

<InstagramEmbed url="https://www.instagram.com/p/CUbHfhpswxt/" width="100%" />

I can't get the height or width to change.

It only works on Twitter, LinkedIn, and Youtube for me.

I'm programming on "react": "^16.13.1" typescript.

[justinmahar]

Sizing is by far the biggest pain with these embeds. They all behave a little differently. So I've left things up to the embed itself unless you specify a size. And even then, the embed might appear to the left of the container, not in the center. Percentages are tricky too.

I'll see what I can do to make it easy to size things. I think the use cases are:

• I want to size it to a specific width (and sometimes height).
• I want to center the embed in the current container. This means the container is 100% and the embed should be centered inside it.

Is there another use case you're looking for? I think those two cover it for the most part. Will look into adding stories to cover these explictly.

[timomak]

Wonderful! Honestly, either-or solution would work for me. Either centering the embed with a set height and weight or giving it the full width of a parent container would solve my problem.

[justinmahar]

Hey @timomak. Wrote a lot of comments on your other issues, lol. But I think with some CSS on your end and the latest release (which includes a border radius on the embed), you should be able to achieve what you're looking to do.

Have a look at the code and demo links in the README. I'm able to center the embeds on the page, and was able to effectively hide TikTok's background by using a width of 325.