title: Youtube video in Angular 4
body: <p>I want to insert a YouTube video in my application in angular 4</p>
  
  <p>here the html:</p>
  
  <pre><code>    &lt;div fxFlex id="visor-video"&gt;
          &lt;iframe width="300" height="200"
            [src]="displayURL"&gt;
          &lt;/iframe&gt;        
        &lt;/div&gt;
  </code></pre>
  
  <p>Here the component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@Component({
    selector: 'app-video-unit',
    templateUrl: 'video-unit.component.html',
    styleUrls: ['video-unit.component.css']
  })
  
  export class VideoUnitComponent implements OnChanges {
  
  
    displayURL;
    @Input() video: Video;
  
  
    constructor(public videoService: VideoService, private sanitizer: DomSanitizer) {
      this.displayURL = this.getSantizeUrl('https://www.youtube.com/embed/tgbNymZ7vqY');
  
    }
  
    ngOnChanges() {
      this.displayURL = this.getSantizeUrl('https://www.youtube.com/embed/tgbNymZ7vqY');
  
    }
    sanitizedDisplayUrl() {
      return this.getSantizeUrl('https://www.youtube.com/embed/tgbNymZ7vqY');
    }
  
    public getSantizeUrl(url: string) {
      return this.sanitizer.bypassSecurityTrustUrl(url);
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>But the sistem say that <strong>"SafeValue must use [property]=binding: <a href="https://www.youtube.com/embed/tgbNymZ7vqY" rel="nofollow noreferrer">https://www.youtube.com/embed/tgbNymZ7vqY</a> (see <a href="http://g.co/ng/security#xss" rel="nofollow noreferrer">http://g.co/ng/security#xss</a>)"</strong></p>