TikTok video embedding does not work on Angular 13

369 Views Asked by At

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.

0

There are 0 best solutions below