ブラウザページでインスペクト要素オプションを使用し、TikTokとInstagramの埋め込みのCSSに移動すると、CSSは機能しますが、このCSSコードをDiscourseに貼り付けても何も変更されません。
Instagramの投稿の埋め込みから巨大な白い背景を削除し、1pxの細い境界線と50pxの丸い境界線を追加していました。TikTokにも同じことを行い、投稿サイズも縮小されましたが、モバイルでは切り取られたように表示されますが、何も変更されません。
ブラウザページでインスペクト要素オプションを使用し、TikTokとInstagramの埋め込みのCSSに移動すると、CSSは機能しますが、このCSSコードをDiscourseに貼り付けても何も変更されません。
Instagramの投稿の埋め込みから巨大な白い背景を削除し、1pxの細い境界線と50pxの丸い境界線を追加していました。TikTokにも同じことを行い、投稿サイズも縮小されましたが、モバイルでは切り取られたように表示されますが、何も変更されません。
異なるドメインから発信されたiframeの内容は、同一オリジンポリシーにより、一般的に操作することはできません。この制限がない場合、例えば、Instagramユーザーが投稿していないものを投稿したように見せかけるCSSで画像を置き換えることができてしまいます。
しかし、背景、境界線の半径、投稿サイズを変更することはできませんか?(相手の内容を変更せずに)
Instagramには、黒いテーマを台無しにする白い背景があります。この巨大なスペースも投稿を非常に台無しにします。
iframeタグ自体(境界線を追加したり、角を丸くしたりなど)は操作できますが、一般的にその中のコンテンツは完全に制限されています。Twitterのように、埋め込みオプションを提供しているサービスもあります。https://publish.twitter.com/ で確認できます。
InstagramとTikTokのiframeタグを操作するにはどうすればよいですか?ここでやった方法ではうまくいきませんでした。
このようにTikTok動画を埋め込む場合:
<iframe src="https://www.tiktok.com/embed/v2/7181493818871565574" height="800" width="400">
Discourseテーマに次のようにスタイルを追加できます:
iframe {
border: 1px solid red;
border-radius: 20px;
}
ただし、iframeタグ自体しか編集できません。