title: Angular 2 - EXCEPTION: Error: unsafe value used in a resource URL context
body: <p>I am getting the following error:</p>
  
  <blockquote>
    <p>Angular 2 - EXCEPTION: Error: unsafe value used in a resource URL context </p>
  </blockquote>
  
  <p>Could it be related to not having the media item straight away on startup? Or is it related to the URL not being safe? I am trying to sanitize it.</p>
  
  <pre><code>export class HomeComponent {
  
    sanitizer: DomSanitizationService;
    errorMessage: string;
    activeMedia: MediaItem = new MediaItem(0, '', '', '', '', '', '');
  
    constructor(
      private mediaStorage: MediaStorageService, 
      private harvesterService: HarvesterService, 
      sanitizer: DomSanitizationService) {
  
      this.sanitizer = sanitizer;
      // Initial call - 
      harvesterService.getMediaItems(10, 'type', 'category');
      let subscription = harvesterService.initialMediaHarvestedEvent.subscribe(() =&gt; {
        this.activeMedia = mediaStorage.mediaList[0];
        let newURL = this.activeMedia.URL + '?rel=0&amp;autoplay=1';
        newURL = newURL.replace('watch?v=', 'v/');
        this.activeMedia.URL = newURL; //sanitizer.bypassSecurityTrustUrl(newURL);
        console.log(newURL);
      });
    }
  
    cleanURL(oldURL: string): SafeResourceUrl {
      return this.sanitizer.bypassSecurityTrustUrl(oldURL);
    }
  }
  </code></pre>
  
  <p>The template code is:</p>
  
  <pre><code>&lt;div class="row" &gt;
      &lt;iframe 
        id="video"  
        class="video" 
        src="{{ cleanURL(activeMedia.URL) }}" 
        frameborder="0" 
        allowfullscreen&gt;
      &lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>