Question

150

Problem embedding tiktok video into angular 7

rated 0 times [ 154] [ 4] / answers: 1 / hits: 6040 / 3 Years ago, fri, march 5, 2021, 12:00:00

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

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tayla

Add To Favorites

Follow

Total Points: 681

Total Questions: 102

Total Answers: 108

Location: Marshall Islands

Member since Tue, Sep 21, 2021

3 Years ago

tayla questions

1 Lodash - How to merge two arrays of objects based on key?

Wed, Oct 28, 20, 00:00, 4 Years ago

1 Horizontal scroll bar is appearing after using slick slider in the webpage

Wed, Oct 21, 20, 00:00, 4 Years ago

1 Jest: `querySelector` returns null in test of a ReactJS component

Sat, Jul 4, 20, 00:00, 4 Years ago

1 setTimeout with Promises

Thu, Apr 9, 20, 00:00, 4 Years ago

1 How to instantiate a JavaScript class in another class?

Mon, Dec 9, 19, 00:00, 5 Years ago

View All

answered 3 Years ago rafael · Accepted Answer

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