브라우저 페이지에서 요소 검사 옵션을 사용하고, 이를 TikTok과 Instagram 임베드의 CSS로 이동하면 CSS는 정상적으로 작동합니다. 하지만 이 CSS 코드를 Discourse에 넣으면 아무 변화가 없습니다.
Instagram 게시물 임베드의 거대한 흰색 배경을 제거하고, 1px의 얇은 테두리와 50px의 둥근 테두리를 추가했습니다. TikTok에도 동일한 작업을 수행했는데, 이렇게 하면 모바일에서 잘려 보이는 것처럼 게시물의 크기도 줄어듭니다. 하지만 아무것도 바뀌지 않았습니다.
일반적으로 동일 출처 정책 때문에 다른 도메인에서 생성된 iframe의 내용을 조작할 수 없습니다. 이러한 제한이 없다면, 예를 들어 사용자가 실제로 게시하지 않은 것처럼 보이도록 CSS를 사용하여 이미지를 교체하는 등의 행위가 가능해집니다.
iframe 태그 자체를 조작(테두리 추가, 모서리 둥글게 만들기 등)할 수는 있지만, 일반적으로 내부 콘텐츠는 완전히 수정할 수 없습니다. 일부 서비스는 임베드 옵션을 제공하며, 예를 들어 Twitter는 https://publish.twitter.com/ 에서 몇 가지 옵션을 제공합니다.
인스타그램과 틱톡의 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 태그 자체만 수정할 수 있는 제한이 있습니다.