title: iframe [src]="videoUrl | sanitize" - when page reloading causes 404 iframe of my website
body: <p>I'm trying to load a videoUrl from a database and assigning it to the iframe [attr.src] to show a youtube video.  The data has to come from a database, there's no other way around that for me besides uploading the video and displaying that, which we can't do at the moment.</p>
  
  <p>The problem is that it is constantly refreshing every couple of seconds making the video flash briefly.</p>
  
  <p>Is there anyway to avoid this?</p>
  
  <p>This is the code I have referring to the iframe and method that returns the url.</p>
  
  <pre><code>&lt;iframe
    class="courseVideo row col-md-12 col-sm-12 col-xs-12 text-center"
    height="300"
    id="introVideoUrl"
    [src]="getIntroVideoUrl(section.introVideoUrl)"
    frameborder="0" allow="autoplay; encrypted-media"
    allowfullscreen
    style="margin-top: 15px;"&gt;
  &lt;/iframe&gt;
  
  getIntroVideoUrl(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(
      "https://www.youtube.com/embed/" + url
    );
  }
  </code></pre>
  
  <p>-- EDIT AFTER @JeremyW's SUGGESTION --
  OK, so I managed to get what @JeremyW was mentioning below.  As such, it no longer constantly refreshes.  I had to make some adjustments and instead of doing it that way, I just made a custom 'Sanitizer' pipe.</p>
  
  <p>But I did recreate it the way he was mentioning and the result is the same as the pipe, the pipe was just a way I can constantly re-use it and not have to worry about rewriting that every time.</p>
  
  <p>I am however now coming across and issue where if I refresh the page, sometimes a Iframed version of my website leading to page 404 is shown instead of the youtube video.</p>
  
  <p>Any reason why this happens or can someone point me to a source that explains it? I could't find a reason for it.</p>
  
  <p>Thanks!</p>