'TikTok embedded video keeps disappearing

I'm trying to embed a TikTok video into my web page, but when the page is loading, I see the video layout for a second before it disappears. This is the code which has been copied and pasted from the TikTok site:

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@60secofserenity/video/6871965847380839686" data-video-id="6871965847380839686" style="max-width: 605px;min-width: 325px;">
    <section>
        <a target="_blank" title="@60secofserenity" href="https://www.tiktok.com/@60secofserenity">@60secofserenity</a>
        <p>
            <a title="duet" target="_blank" href="https://www.tiktok.com/tag/duet">##duet</a> with @dr.kyleross
            <a title="comedy" target="_blank" href="https://www.tiktok.com/tag/comedy">##comedy</a>
            <a title="fyp" target="_blank" href="https://www.tiktok.com/tag/fyp">##fyp</a>
            <a title="foryou" target="_blank" href="https://www.tiktok.com/tag/foryou">##Foryou</a>
        </p>
        <a target="_blank" title="♬ original sound - Dr. Kyle Ross" href="https://www.tiktok.com/music/original-sound-6863810291730303750">♬ original sound - Dr. Kyle Ross</a>
    </section>
</blockquote>
<script async src="https://www.tiktok.com/embed.js"></script>

On the console, I get this error:

Resource interpreted as Document but transferred with MIME type application/json: "https://www.tiktok.com/embed/v2/6871965847380839686?lang=en-US".

I'm not sure how to proceed from this error. I appreciate any advice, and thank you in advance for any tips!

javascripthtmlembed


Solution 1:[1]

I had a very similar problem. There are two important things regarding this issue.

First of all, I believe TikTok encountered some problems recently. However, it is just my speculation. Apart from my code, I have been trying to use third-party projects from GitHub and embed code didn't work with any of them on my Chrome, Firefox and Safari. What was happening looked exactly how you described - layout showing up and then disappearing after a few seconds. Now, without any change in the code, I don't have this problem anymore. I think it is important to write about it in case anything similar happens in the future for someone else.

Secondly, if you use embed codes as a part of a bigger project, you add TikTok embed codes like posts or, for example, they are part of React component, remember to run the TikTok script after the blockquote part is added as described here for the case of Instagram. Otherwise what will load will be only a TikTok video layout.

Solution 2:[2]

We had the same issue and "fixed" it by removing the following from our .htaccess.

Header set Referrer-Policy same-origin

That security header prevents the tiktok iframe to load properly. If I find more information, I'll update here.

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 Jakub Siwiec
Solution 2 Vincent Poirier

Related Questions