¿No hay forma de estilizar TikTok e Instagram incrustados con CSS?

Cuando uso la opción de inspeccionar elemento en la página del navegador y la aplico a los CSS de la incrustación de TikTok e Instagram, el CSS funciona, pero cuando pongo este código CSS en el discurso, no cambia nada.

Estaba eliminando el gran fondo blanco de la incrustación de las publicaciones de Instagram y poniendo un borde delgado de 1px y un borde redondeado de 50px, lo mismo que hice para TikTok, lo que también redujo el tamaño de la publicación, ya que aparece recortada en el móvil, pero no se ha cambiado nada.

2 Me gusta

Generalmente no puedes manipular el contenido de un iframe que se origina en un dominio diferente debido a la política del mismo origen; sin esta restricción, podrías, por ejemplo, reemplazar una imagen con CSS que haga que parezca que un usuario de Instagram publicó algo que no hizo.

3 Me gusta

¿Pero no puedes simplemente cambiar el fondo, el radio del borde y el tamaño de la publicación? (¿Sin cambiar el contenido de la persona?)

En Instagram hay este fondo blanco que arruina el tema negro, además de este ENORME espacio que arruina mucho la publicación.

En TikTok, la publicación está pegada en la esquina y tiene este horrible borde blanco grueso.

En Twitter logré quitarle el fondo blanco y hacerlo transparente (para adaptarlo a cualquier tema) y ponerle el borde radio en 50px y borde delgado

Puedes manipular la etiqueta iframe en sí (añadir bordes, redondear esquinas, etc.), pero, por lo general, el contenido interior está completamente fuera de tu alcance. Algunos servicios proporcionan opciones de incrustación, Twitter, por ejemplo, tiene algunas en https://publish.twitter.com/

1 me gusta

¿Cómo puedo manipular la etiqueta iframe de Instagram y TikTok? Porque la forma en que lo hice aquí no funcionó.

1 me gusta

Si incrustas un video de TikTok de esta manera:

<iframe src="https://www.tiktok.com/embed/v2/7181493818871565574" height="800" width="400">

puedes añadir estilos a un tema de Discourse de esta manera:

iframe {
  border: 1px solid red;
  border-radius: 20px;
}

pero estás limitado a editar solo la etiqueta iframe.

2 Me gusta