embed video from tiktok

Question

I have the current piece, which I want is to get the video´s URL, but it just shows an unstyled text.

  async function start() {

    let url = "https://www.tiktok.com/@tiagogreis/video/6830059644233223429";
    let contentlist = document.querySelector("#content");

      let data = await loadDataFromURL(url);
      contentlist.innerHTML = data.html;
  }

  async function loadDataFromURL(url) {

    let oembed = `https://www.tiktok.com/oembed?url=${url}`;
    console.log("the oembed link", oembed);

    let dataFromOembed = await fetch(oembed);
    let data = await dataFromOembed.json();
    if (data === undefined) {
      throw Error("No data received from oembed");
    }

    console.log("the data from oembed", data);

    return data;
  }

  start(); 

It is the video URL I want. Can you help, please?

Answer 1

You can use the /embed/v2/:videoId api. Like this:

const tikTokFrame = document.createElement('iframe');
tikTokFrame.width = '100%';
tikTokFrame.height = '500';
tikTokFrame.src = 'https://www.tiktok.com/embed/v2/6718335390845095173';

Answer 2

I would go ahead and take a look at the developer documentation from tik tok on embedding located here. It looks as though there is a specific link that the developer wants to be used for requests from other web-pages. That link should appear similar to this:

https://www.tiktok.com/oembed?url=https://www.tiktok.com/@scout2015/video/6718335390845095173

This is what you have and it returns a json object with an HTML entry that has all the data you need to embed the video using Tik Tok's player. Therefore you can append the data.html to an element within your site to add their player. This likely shows up as unstyled text because the final set of tags is not actually being executed. If you place these tags somewhere in your html, the code should execute and embed the video.

<script async src='https://www.tiktok.com/embed.js'></script>