Когда я использую опцию «Исследовать элемент» на странице браузера и перехожу к CSS для встраиваемых элементов TikTok и Instagram, стили работают. Однако, когда я вставляю этот CSS-код в Discourse, ничего не меняется.
Я пытался убрать огромный белый фон у встраиваемых постов Instagram, добавив тонкую рамку толщиной 1 пиксель и скругление углов 50 пикселей. То же самое я сделал для TikTok, что также уменьшило размер поста, так как на мобильных устройствах он отображается обрезанным. Но никаких изменений не произошло.
Обычно вы не можете манипулировать содержимым iframe, исходящего из другого домена, из-за политики одинакового источника — без такого ограничения вы могли бы, например, заменить изображение с помощью CSS так, чтобы это выглядело так, будто пользователь Instagram опубликовал что-то, чего он на самом деле не делал.
Но разве нельзя просто изменить фон, скругление углов и размер поста? (Не меняя при этом контент самого человека?)
В Instagram есть этот белый фон, который портит тёмную тему, а ещё это ОГРОМНОЕ пространство, которое сильно портит вид поста.
В TikTok пост привязан к углу, и вокруг него ужасная толстая белая рамка
В Twitter мне удалось убрать белый фон и сделать его прозрачным (чтобы адаптировать под любую тему), а также установить радиус границы в 50 пикселей и тонкую границу.
Вы можете манипулировать самим тегом iframe (добавлять границы, скруглять углы и т. д.), но обычно содержимое внутри полностью недоступно для изменения. Некоторые сервисы предоставляют параметры встраивания: например, у Twitter они есть на https://publish.twitter.com/
Как я могу манипулировать тегами iframe для Instagram и TikTok? Потому что способ, который я использовал здесь, не сработал.
Если вы встраиваете видео TikTok вот так:
<iframe src="https://www.tiktok.com/embed/v2/7181493818871565574" height="800" width="400">
вы можете добавить стили к теме Discourse следующим образом:
iframe {
border: 1px solid red;
border-radius: 20px;
}
но вы ограничены возможностью редактировать только сам тег iframe.
