Issue with iframe in Angular 4 Component

Question

I'm trying to use iframe in one of my template and used property binding to assign the value to the src property in iframe and its not working. I used some pipes to fix this problem but the home page is rendering in that div instead of iframe.

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

In Template:

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