quando uso a opção inspecionar elemento na página do navegador e a aplico ao CSS do embed do tiktok e do instagram, o CSS funciona, mas quando coloco este código CSS no discourse, ele não muda nada
Eu estava removendo o enorme fundo branco do embed de posts do instagram e colocando uma borda fina de 1px e uma borda arredondada de 50px, o mesmo que fiz para o tiktok que também reduziu o tamanho do post, pois ele aparece cortado no mobile, mas nada mudou
Geralmente, você não pode manipular o conteúdo de um iframe originário de um domínio diferente devido à política de mesma origem — sem esse tipo de restrição, você poderia, por exemplo, substituir uma imagem por CSS que a fizesse parecer que um usuário do Instagram postou algo que ele não postou.
Mas você não pode simplesmente alterar o fundo, o raio da borda e o tamanho da postagem? (Sem alterar o conteúdo da pessoa?)
No Instagram, há esse fundo branco que estraga o tema preto, além desse ENORME espaço que estraga muito a postagem
No Twitter consegui remover o fundo branco e deixá-lo transparente (para adaptar a qualquer tema) e colocar a borda arredondada em 50px e borda fina
Você pode manipular a tag iframe em si (adicionar bordas, arredondar cantos, etc.), mas geralmente o conteúdo interno está totalmente fora de alcance. Alguns serviços fornecem opções de incorporação, o Twitter, por exemplo, tem algumas em https://publish.twitter.com/
Como posso manipular a tag iframe do instalgram e do tiktok? Porque a forma como fiz aqui não funcionou
Se você incorporar um vídeo do TikTok assim:
<iframe src="https://www.tiktok.com/embed/v2/7181493818871565574" height="800" width="400">
você pode adicionar estilos a um tema do Discourse assim:
iframe {
border: 1px solid red;
border-radius: 20px;
}
mas você está limitado a editar apenas a tag iframe.