search

justinmahar / react-social-media-embed

📰 Easily embed social media posts from Facebook, Instagram, LinkedIn, Pinterest, TikTok, X (Twitter), and YouTube in React.
https://justinmahar.github.io/react-social-media-embed/
MIT License
215 stars 30 forks source link

Tiktok embedding have extra padding #32

Closed zeghmouri closed 1 year ago

zeghmouri commented 1 year ago

Hello everyone I am trying to embed a tiktok video into my React appand that's the result

image

As you can see the video is wrapped inside a div (with white background) that have padding how can I remove that or hiw can I change the background color so it fits my website background.

zeghmouri commented 1 year ago

I made the background of my site Red so you can see what I mean

image

justinmahar commented 1 year ago

Ran into this in another issue (#5), the solution was:

If you size any of the embeds with a width (non-percentage), you should be able to add a background color to the surrounding container.

Check out that other issue, and give that a try.

zeghmouri commented 1 year ago

Thanx @justinmahar, But I solved it by applying a negative left margin to the iframe

.tiktok-embed-container iframe{
        margin-left: -68px;
}

and I have fixed the width of the embed to 325px (the width of the video). With this I have removed the extra padding.