拒绝在框架中显示“https://www.youtube.com/watch?v=oKZRsBjQJOs”，因为它将“X-Frame-Options”设置为“sameorigin”

Question

我需要在我的网站上放置来自 youtube 的视频，但 URL 是一个变量，我创建了一个可以放置的管道，但不起作用。

这是我在 HTML 文件中的代码

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

我的管道的代码是这样的

export class VideoPipe implements PipeTransform {

    constructor (private domSanitizer:DomSanitizer ){ }

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

}

但是当我尝试放置视频 URL 时，出现错误。

我在开关盒中分配 URL 视频

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

Answer 1

将您的网址更改https://www.youtube.com/watch?v=TTyFV-qhQtQ为https://www.youtube.com/embed/TTyFV-qhQtQ

原因

/embed 具有所需的标题。

为什么是 X-Frame-Options

它是为了用户安全。防止clickjacking：https : //developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

该embed端点飞漫更安全，以显示在外部网站（不youtube.com）。