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:
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>