Search code examples
javascriptangulartiktok

Problem embedding tiktok video into angular 7

I have embedded the tiktok video in my website (on popup), but it just shows up as shown and cannot play the video.

enter image description here

I use angular 7 and ngx-bootstrap for popup.

This is my code

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hiip Application</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon.ico">
  <link rel="icon" type="image/png" sizes="96x96" href="assets/icons/favicon.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" type="text/css">
  <script async src="https://www.tiktok.com/embed.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

*.component.html

<blockquote class="tiktok-embed"
   cite="https://www.tiktok.com/@midu_official/video/6927634419398266113"
   data-video-id="6927634419398266113" style="max-width: 605px;min-width: 325px;">
   <section>
     <a target="_blank" title="@midu_official"href="https://www.tiktok.com/@midu_official">@midu_official</a>
     <p>Anh ơiiiii</p>
     <a target="_blank" title="♬ nhạc nền - 💚anhthu💚 - 💚ngọc ánh💚" href="https://www.tiktok.com/music/nhạc-nền-💚anhthu💚-6915637069796641537">♬ nhạc nền - 💚anhthu💚 - 💚ngọc ánh💚</a> </section>
</blockquote>
Solution

  • Seems view renders before tiktok script was loaded. Try to load script manually and after script loads, show view via ngIf.

    Delete script from index.html

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

    app.component

    export class AppComponent {

  showBlock = false;
  constructor( ) {

  this.loadScript('https://www.tiktok.com/embed.js').then(status => {
    if (status === 'loaded') {
      this.showBlock = true;
    }
  })
  }

  loadScript(url) {
    return new Promise((resolve, reject) => {

      if (document.getElementById('tiktok-script')) {
        resolve("loaded");
      }
      const script = document.createElement("script");
      script.async = true;
      script.src = url;
      script.setAttribute('id', 'tiktok-script');

      script.onload = () => {
        // script is loaded successfully, call resolve()
        resolve("loaded");
      };

      script.onerror = () => {
        // script is not loaded, call reject()
        reject("error");
      };

      document.head.appendChild(script);
    });
  }

}

    View

    <ng-container *ngIf="showBlock ">
  <blockquote class="tiktok-embed"
              cite="https://www.tiktok.com/@midu_official/video/6927634419398266113"
              data-video-id="6927634419398266113" style="max-width: 605px;min-width: 325px;">
    <section>
      <a target="_blank" title="@midu_official"href="https://www.tiktok.com/@midu_official">@midu_official</a>
      <p>Anh sdf</p>
      <a target="_blank" title="♬ nhạc nền - 💚anhthu💚 - 💚ngọc ánh💚" href="https://www.tiktok.com/music/nhạc-nền-💚anhthu💚-6915637069796641537">♬ nhạc nền - 💚anhthu💚 - 💚ngọc ánh💚</a> </section>
  </blockquote>
</ng-container>

    This works for me Example