TikTok embedded video keeps disappearing

user_14347638 0
Viewed 2161

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!

embed html javascript
2 Answers

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.

user_75054480

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.

user_39536600
Related