拒绝在框架中显示"https://www.youtube.com/watch?v=oKZRsBjQJOs"，因为它将"X-Frame-Options"设置为"sameorigin" [英] Refused to display 'https://www.youtube.com/watch?v=oKZRsBjQJOs' in a frame because it set 'X-Frame-Options' to 'sameorigin'

问题描述

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

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.

这是我在HTML文件中的代码

This is my code in HTML file

<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时，出现了错误.

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

我将URL视频放在开关盒中

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;
          }

推荐答案

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

/embed 具有必需的标头.

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

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

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

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

这篇关于拒绝在框架中显示"https://www.youtube.com/watch?v=oKZRsBjQJOs"，因为它将"X-Frame-Options"设置为"sameorigin"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！