html - 拒绝在帧中显示 '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 时，出现错误。

我在 switch case 中分配 URL video

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 具有所需的 header 。

为什么是X-Frame-Options

这是为了用户安全。防止点击劫持:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

embed 端点旨在更安全地显示在外部网站(而非 youtube.com)上。