Can't center align Social Embeds

[timomak]

I already submitted a ticket saying I can't change the width of the Social Embeds, hence I can't make it fill a Div to '100%'.

When I wrap the Social Embed into a <div>, I can't get it to align in the center.

Only TikTok seems to auto-align and fill the screen. Although the TikTok Embed is narrow and it has a white background color behind the video itself that fills the full width of the parent container.

[justinmahar]

We might be able to get around this by setting a width on the embed and putting it in a div with display flex and justify content center. I'll play around with sizing a bit and see if I can get things working.

[timomak]

Just to be clear, this is an example of what I'm seeing.

I have a parent container with a red background color and two embeds inside.

<TwitterEmbed width={'100%'} url='https://twitter.com/PixelAndBracket/status/1356633038717923333' /> <TikTokEmbed width={'100%'} url='https://www.tiktok.com/@epicgardening/video/7055411162212633903?is_copy_url=1&is_from_webapp=v1' />

Look at how the TikTok does fill the full width, but it does with the parent container holding the TikTok iframe I'm assuming.

[justinmahar]

@timomak TikTok is a little tricky because the iframe has a white background. This is TikTok, not me. But I was able to work around that by surrounding the embed in a div, centering the contents, and sizing the embed to a width of 325. I also added a border radius to the div, too, to match TikTok's. This seems to have done the trick.

[justinmahar]

You can try it yourself here:

• https://justinmahar.github.io/react-social-media-embed/?path=/story/embeds-tiktokembed--main-example&globals=backgrounds.value:!hex(333333)

From the toolbar, select the dark background.

[justinmahar]

The code for this is in the README.

<div style={{ display: 'flex', justifyContent: 'center' }}>
  <TikTokEmbed url="https://www.tiktok.com/@epicgardening/video/7055411162212633903" width={325} />
</div>

Give that a shot, see if that does what you're looking to do.

[timomak]

Beatiful! That worked!!

[justinmahar]

Badass. 💪