On my app, I am trying to embed a TikTok video in the following format.
index.html file's head
:
<script async src="https://www.tiktok.com/embed.js"></script>
TS file's ngOnInit
:
const videoUrl = //arbitrary url
const tiktokRes: any =
await lastValueFrom(
this.http.get(`https://www.tiktok.com/oembed?url=${videoUrl}`)
);
if (!tiktokRes) { return; }
this.videoHtml = this.sanitizer.bypassSecurityTrustHtml(
(tiktokRes['html'] as string)
);
this.showVideo = true;
and my HTML as follow:
<mat-tab label="Video" *ngIf="showVideo">
<div [innerHtml]="videoHtml"></div>
</mat-tab>
This is my current result (blank TikTok section, video not loaded at all)
What do I do to get this to work? I've browsed all other StackOverflow questions regarding this topic but none of the answers worked.