How to play Video coming in HTML String in IONIC 4

Question

I've HTML string coming from API and inside HTML String I am getting youtube video into <iFrame></iFrame>

I want to display this video along with HTML.

export class BlogDetailsPage implements OnInit {
  detail = {};
  constructor(public domSanitizer: DomSanitizer, private ms: MasterService) { }

  ngOnInit() {
    var id = this.route.snapshot.params.id;
    this.ms.present();
    this.ms.getblogDetail(id).subscribe(res => {
      this.detail = this.domSanitizer.bypassSecurityTrustResourceUrl(res.content.rendered);
      console.log(this.detail);
      this.ms.dismiss();
    });
  }
}

In HTML I display string by following code

{{detail}}
<div class="blog-box" *ngIf="detail.content != undefined" [innerHTML]="detail">
</div>

Output

I am unable to display HTML either Video.

Have you tried without `{{detail}}` - isn't that what's triggering the error and then not making it as far as the `[innerHTML]` which I thought was correct? — rtpHarry, Oct 13 '19 at 10:34

score 0 · Answer 1 · answered Oct 15 '19 at 08:03

This is kind of a comment / guess but I needed the formatting and space to explain.

What I meant was remove the {{detail}} because I think that is causing your error.

Also, now I type this, it seems like you are using two different structures - detail.content in the if and then trying to display detail in the innerHTML.

Combining both of these ideas, try changing from this:

{{detail}}
<div class="blog-box" *ngIf="detail.content != undefined" [innerHTML]="detail">
</div>

To this:

<div class="blog-box" *ngIf="detail.content != undefined" [innerHTML]="detail.content">
</div>

How to play Video coming in HTML String in IONIC 4

1 Answers1