[Fixed] Embed TikTok video in angular 9 Application

Issue

on the tiktok developer page I’ve discover that is possible to embed a tiktok video in a web page.
The method seems really simple, copy the embedded code and paste it in your html code.

well, the code I’ve copied is this one

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@alebuffoli/video/6793667068622359814" data-video-id="6793667068622359814" style="max-width: 605px;min-width: 325px;" > 
<section> 
<a target="_blank" title="@alebuffoli" href="https://www.tiktok.com/@alebuffoli">@alebuffoli</a> <p>Non male ah? 😏</p> 
<a target="_blank" title="♬ suono originale - Alessandro Buffoli" href="https://www.tiktok.com/music/suono-originale-6793595951710833413">♬ suono originale - Alessandro Buffoli</a> 
</section> 
</blockquote> 
<script async src="https://www.tiktok.com/embed.js"></script>

But the problem is that in a standard html page it works, but in my angular app the only thing I see is this:
enter image description here

But the result should be something like this: https://developers.tiktok.com/doc/Embed

I’ve even tried whit a innerHTML block, but the result is the same.
What’s the problem here?

Solution

You could place the tiktok’s embed.js script in index.html file directly

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

and then the HTML snippet in corresponding component’s *.component.html file

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@alebuffoli/video/6793667068622359814" data-video-id="6793667068622359814" style="max-width: 605px;min-width: 325px;" > 
<section> 
<a target="_blank" title="@alebuffoli" href="https://www.tiktok.com/@alebuffoli">@alebuffoli</a> <p>Non male ah? 😏</p> 
<a target="_blank" title="♬ suono originale - Alessandro Buffoli" href="https://www.tiktok.com/music/suono-originale-6793595951710833413">♬ suono originale - Alessandro Buffoli</a> 
</section> 
</blockquote> 

Leave a Reply

(*) Required, Your email will not be published