Custom styling for Tiktok Embed in NextJS

Question

I'm building a site that can use Tiktok oEmbed, so far so good but I have a problem that how can I custom style it like the body background is transparent?

I had already added styles, MutationObserver to detect change but it not working because all of my styles are overwritten by the embed.js of Tiktok. Can anybody help me in this case? Thank you.

.feature-frame {
  padding: 8px;

  iframe {
    min-width: initial !important;
    body {
      background-color: transparent !important;
      & * {
        color: $white !important;
      }
    }
  }

  blockquote {
    margin: 0;
    min-width: initial !important;
    body {
      background-color: transparent !important;
      & * {
        color: $white !important;
      }
    }
  }
}

const ObserverConfig = {
  childList: true,
  attributes: true,
  subtree: true,
};
const ref = useRef(null);

function mutationCallback(mutationList: MutationRecord[]) {
  // Get the iframe from the mutation that has added it
  const iframeAdded = mutationList.reduce<Node | undefined>((acc, curr) => {
    const iframe = Array.from(curr.addedNodes).find(
      (node) => node.nodeName === "IFRAME"
    ) as HTMLIFrameElement;

    if (iframe) {
      acc = iframe;
    }
    return acc;
  }, undefined);

  if (iframeAdded) {
    iframeAdded.addEventListener("load", () => {
      // Do something
    });
  }
  mutationList.forEach(function (mutation) {
    // Do something
  });
}

useEffect(() => {
  /**
   * MutationObserver:
   * https://stackoverflow.com/questions/3219758/detect-changes-in-the-dom
   */
  if (!("MutationObserver" in window)){
    // Window load
  }

  /**
   * TODO: Check bugs for MutationObserver
   * https://caniuse.com/#feat=mutationobserver
   */
  const elem = ref.current;

  const observer = new MutationObserver(mutationCallback);

  if (elem) {
    observer.observe(elem!, ObserverConfig);
  }
  return () => {
    observer.disconnect();
  };
}, [ref]);

Answer 1

The iframe embed is cross domain, you cannot influence its background color as its set by Tiktok on their body - unless Tiktok provides a parameter to style elements within that you can configure, it would not be possible to modify contents within a third party iframe.