'Embedding TikTok Video in React App; Video not showing

I am currently working on embedding a tiktok video into a react application. At the moment, I am trying to display the html code, one can get by using tiktoks api (https://developers.tiktok.com/doc/embed-videos), through the use of an iframe. The html code:

<blockquote class=\"tiktok-embed\" cite=\"https://www.tiktok.com/@scout2015/video/6718335390845095173\" data-video-id=\"6718335390845095173\" style=\"max-width: 605px;min-width: 325px;\" > <section> <a target=\"_blank\" title=\"@scout2015\" href=\"https://www.tiktok.com/@scout2015\">@scout2015</a> <p>Scramble up ur name & I’ll try to guess it😍❤️ <a title=\"foryoupage\" target=\"_blank\" href=\"https://www.tiktok.com/tag/foryoupage\">#foryoupage</a> <a title=\"PetsOfTikTok\" target=\"_blank\" href=\"https://www.tiktok.com/tag/PetsOfTikTok\">#petsoftiktok</a> <a title=\"aesthetic\" target=\"_blank\" href=\"https://www.tiktok.com/tag/aesthetic\">#aesthetic</a></p> <a target=\"_blank\" title=\"♬ original sound - tiff\" href=\"https://www.tiktok.com/music/original-sound-6689804660171082501\">♬ original sound - tiff</a> </section> </blockquote> <script async src=\"https://www.tiktok.com/embed.js\"></script>"

As the last part (the async script) was creating errors in the iframe, I removed it per code. Instead, I am loading it as soon as the component mounts and append it to the head of the document. Only when the script was already loaded, the iframe is actually rendered. For that, I used the method from this post: Problem embedding tiktok video into angular 7

render(){
        return (
            this.state.embedHtml != null ? 
            <iframe 
                srcDoc = {this.state.embedHtml} 
                sandbox = "allow-forms allow-same-origin allow-scripts allow-top-navigation"
            />:null
        )
    }

However, all I get is this visual and these values: TikTokIFrame(Video not showing)

There are no errors in console. So yeah, what I actually would expect is the tiktok video to be visible, as well as the text having the proper style. However, this is not the case.

I was trying several different approaches. (From setting the innerHtml of various elements to the given html, to using an iframe (as shown above)).

Does anybody have an idea, why the video is not showing?

javascripthtmlreactjstiktok


Solution 1:[1]

Use https://www.tiktok.com/embed/{video_id} instead of the page URL. You can find the video_id by looking at the last number string of the tiktok url. For example, the video ID of this video

https://www.tiktok.com/@heaven.marshall/video/7072819797184171310

is 7072819797184171310

Set your CSS of iframe and iframe container

const iframe_container = {
                left: 0,
                          width: "100%",
                          height: 500,
                          position: "relative"
                        }

const iframe ={top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      position: "absolute",
      border: 0}

Place the following DOM element anywhere in your react page.

<div className={iframe_container}>
                <iframe
                  src="https://www.tiktok.com/embed/7072819797184171310"
                  className={iframe}
                  allowfullscreen
                  scrolling="no"
                  allow="encrypted-media;"
                ></iframe>
              </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions