Refused to display 'https://www.youtube.com/watch?v=oKZRsBjQJOs' in a frame because it set 'X-Frame-Options' to 'sameorigin'

问题

I need to place a video from youtube in my website but the URL is a variable, I created a pipe to can put, but don't work.

This is my code in HTML file

<iframe width="670" height="348" [src]=" video | video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

the code of my pipe is this

export class VideoPipe implements PipeTransform {

    constructor (private domSanitizer:DomSanitizer ){ }

    transform(url: string): any {
        return this.domSanitizer.bypassSecurityTrustResourceUrl( url );
    }

}

but when I tried to put the video URL , I get the error.

I asign the URL video in a switch case

case 'marketing':{
              this.bodyClass="background-marketing-text";
              this.btnClass="btnMarketing";
              this.video="https://www.youtube.com/watch?v=TTyFV-qhQtQ";
              break;
          }

回答1:

Change your url https://www.youtube.com/watch?v=TTyFV-qhQtQ to https://www.youtube.com/embed/TTyFV-qhQtQ

Reason

/embed has the required header.

Why is X-Frame-Options

It is there for user security. Prevents clickjacking : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

The embed endpoint is desinged to be safer to show on external websites (not youtube.com).

来源：https://stackoverflow.com/questions/51976152/refused-to-display-https-www-youtube-com-watchv-okzrsbjqjos-in-a-frame-beca