Iframe issue in Angular 4 Component

I am trying to use an iframe in one of my templates and property binding to bind the value to the src property in the iframe and its not working. I have used some pipes to fix this issue, but the homepage renders to this div instead of the iframe.

.subscribe(
            data => { 
                ...
                const videoId = this.video.id.videoId;
                this.videoUrl = 'http://www.youtube.com/embed/' + videoId;
                ...
            }
);

      

        
        
        
      

    

In the template:

<div class="embed-responsive embed-responsive-16by9">
 <iframe class="embed-responsive-item" [src]="videoUrl" allowfullscreen>
 </iframe>
</div>