when I use the inspect element option on the browser page and move it to the CSS of the tiktok and instagram embed, the css works, but when I put this CSS code in the discourse, it doesn’t change anything
I was removing the huge white background from the embedding of instagram posts and putting a thin border of 1px and a rounded border of 50px, the same I did for tiktok which also reduced the size of the post, as it appears cropped on mobile, but nothing is changed
You generally can’t manipulate the content of an iframe originating from a different domain due to the same origin policy — without this kind of restriction you could, for example, replace an image with CSS that makes it look like an instagram user posted something that they didn’t.
But can’t you just change the background, border radius and post size? (Without changing the content of the person?)
On instagram there is this white background that spoils the black theme, apart from this HUGE space that spoils the post a lot
On twitter I managed to remove the white background and make it transparent (to adapt to any theme) and put the radius border at 50px and slim border
You can manipulate the iframe tag itself (add borders, round corners, etc), but generally the content within is entirely off-limits. Some services provide embed options, twitter for example has some on https://publish.twitter.com/
How can I manipulate the instalgram and tiktok iframe tag? Because the way I did it here didn’t work
If you embed a tiktok video like this:
<iframe src="https://www.tiktok.com/embed/v2/7181493818871565574" height="800" width="400">
you can add styles to a Discourse theme like this:
iframe {
border: 1px solid red;
border-radius: 20px;
}
but you’re limited to only editing the iframe tag itself