'TikTok video embedding does not work on Angular 13

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)

enter image description here

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.

htmlangulartiktok


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions