iframe [src]="videoUrl | sanitize" - when page reloading causes 404 iframe of my website

Question

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.

The problem is that it is constantly refreshing every couple of seconds making the video flash briefly.

Is there anyway to avoid this?

This is the code I have referring to the iframe and method that returns the url.

<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;">
</iframe>

getIntroVideoUrl(url) {
  return this.sanitizer.bypassSecurityTrustResourceUrl(
    "https://www.youtube.com/embed/" + url
  );
}

-- 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.

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.

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.

Any reason why this happens or can someone point me to a source that explains it? I could't find a reason for it.

Thanks!

score 1 · Answer 1 · answered Jun 28 '18 at 21:23

1

I suspect that it's due to the way Angular's property bindings work. I wasn't able to easily find a source to verify my suspicion, but I think that each time Angular checks the value of the src attribute, to see if it's changed, it will re-call the function... causing it to refresh the value of the attribute - causing the restart you're seeing.

I've accomplished something similar in the past, here are a few snippets of my code to help you along. Long story short, rather than calling the function from your HTML, point the [src] attribute to a variable, and then use a function in the TS file to set the proper value of that variable:

HTML:

<iframe 
  *ngIf="homeVideo"
  [src]="homeVideo"
  frameborder="0"
  gesture="media"
  allow="encrypted-media"
  allowfullscreen>
</iframe>

TS:

export class HomeComponent implements OnInit {
    // Video Url
    homeVideo;

    ngOnInit() {
        // Pull updated content from Firebase
        this.getContent();
    }

    getContent() {
        this.contentService.getPageContent('homePage').then( pageContent => {
            this.homeVideo = this.sanitizer.bypassSecurityTrustResourceUrl(pageContent.homeVideo);
        }
    }
}

answered Jun 28 '18 at 21:23

JeremyW

5,157
6
29
30

I'm not really sure where I'm going at this wrong, you seem to have a custom contentService service, and I have a GET call returning Json in the constructor. It seems ngOnInit() (if I'm not mistaken) is being called before the get constructor that grabs the data as its returning a undefined value and my initial method required me to pass url itself and then use the sanitizer to clean it. – Alex Liosatos Jun 28 '18 at 21:59
The difference is that in my setup, the `src` attribute is pointed to a variable - in yours it is pointed to a function... and that's the problem. You need to set your `src` attribute to be data-bound to a variable... and then set the value of that variable in your TS file. Whether the function (that sets the variable) is called from your constructor, ngOnInit, or any other lifecycle methods... is up to you. – JeremyW Jun 29 '18 at 12:50
I made an edit to my original question. Your suggestion did help however I went further on improving the re-usability of it. Do you or does anyone know by chance the answer to why when refreshing the page manually, it loads a 404 iframe of my website instead of the youtube video? – Alex Liosatos Jul 02 '18 at 20:58
That's pretty weird, I haven't experienced that... I'm sorry to say that I have no idea what could be causing that kind of behavior... :( Is it *every* time you refresh manually, or is it intermittent? – JeremyW Jul 02 '18 at 21:10

iframe [src]="videoUrl | sanitize" - when page reloading causes 404 iframe of my website

1 Answers1