1

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]);
Đoàn Ngọc Thưởng
  • 66
  • 6

1 Answers1

2

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.

Ramakay
  • 2,919
  • 1
  • 5
  • 21
  • Thanks for answering! I wonder if I can add ```script.onload``` to detect the script is loaded to overwrite style again with js? – Đoàn Ngọc Thưởng Mar 18 '22 at 03:10
  • 1
    No, you cannot influence cross domain content unless the domain (tiktok) accepts such parameters, your script has no control of their contents - for example in the youtube player accepts color https://developers.google.com/youtube/player_parameters but not TikTok https://developers.tiktok.com/doc/embed-videos#:~:text=You%20can%20get%20the%20embed,pictured%20in%20the%20following%20photo.&text=Once%20you%20have%20clicked%20on,the%20HTML%20code%20will%20prompt. – Ramakay Mar 18 '22 at 13:41