Embed Youtube Video - Refused to Display in a Frame Because It Set 'X-Frame-Options' to 'Sameorigin'

Embed YouTube video - Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

You must ensure the URL contains embed rather watch as the /embed endpoint allows outside requests, whereas the /watch endpoint does not.

<iframe width="420" height="315" src="https://www.youtube.com/embed/A6XUVjK9W4o" frameborder="0" allowfullscreen></iframe>

Embedding youtube video Refused to display document because display forbidden by X-Frame-Options

The page you're setting as the source of the iframe (the Youtube /watch page) doesn't want to be embedded in your page. You cannot force it to let you do that.

The correct URL to embed is of the form:

https://www.youtube.com/embed/<video-id>

In your case

https://www.youtube.com/embed/oHg5SJYRHA0

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

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

Angular/YouTube API - refused to display: in a frame because it set 'X-Frame-Options' to 'sameorigin

Apparently, the url that you're trying to hit gives a JSON response which has an items property. Each item there has a vidoeId which is something you might be interested in to display them as embedded videos in a list.

How about requesting for the data using HttpClient and then using safeUrl as pipe.

Here's what the component would look like in that case:

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  results$: Observable<Array<any>>;

  constructor(
    private http: HttpClient
  ) {}

  ngOnInit() {
    this.results$ = this.http.get(
      "https://www.googleapis.com/youtube/v3/search?part=snippet&q=robocop&topicId=%2Fm%2F02vxn&key=AIzaSyB42WhSTkS6_0uUPX6EuGakkGz4RHXnlIc"
    ).pipe(
      map(res => res.items),
      map((items: Array<any>) => {
        return items.map(item => ({
          title: item.snippet.title,
          vidoeUrl: `https://www.youtube.com/embed/${item.id.videoId}`,
        }))
      })
    );
  }
}

And then you'd also create a pipe to sanitize the url:

import { Pipe, PipeTransform } from "@angular/core";
import { SafeResourceUrl, DomSanitizer } from "@angular/platform-browser";

@Pipe({
  name: "safeUrl"
})
export class SafeUrlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(url: string, args?: any): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

You'd finally iterate through the results list in the tempate:

<ul *ngIf="results$ | async as results; else elseBlock">
  <li *ngFor="let item of results">
    <iframe 
      [class.thumbnail]="thumbnail" 
      [src]="vidoeUrl | safeUrl" 
      width="560"
      height="315" 
      frameborder="0" 
      webkitallowfullscreen
      mozallowfullscreen 
      allowfullscreen>
    </iframe>
  </li>
</ul>

<ng-template #elseBlock>
  Something went wrong
</ng-template>

PS: Your id is private so you shouldn't be sharing it in questions here on StackOverflow. As of now, you'd just see Something went wrong as I'm getting an Unauthorized Error. But it should work just fine for you.

Here's a Working Sample Code for your ref.

Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

O.K. after spending more time on this with the help of this SO post

Overcoming "Display forbidden by X-Frame-Options"

I managed to solve the issue by adding &output=embed to the end of the url before posting to the google URL:

var url = data.url + "&output=embed";
window.location.replace(url);

Refused to display 'url' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

I faced the same error when displaying YouTube links.
For example: https://www.youtube.com/watch?v=8WkuChVeL0s

I replaced watch?v= with embed/ so the valid link will be:
https://www.youtube.com/embed/8WkuChVeL0s

It works well.

Try to apply the same rule on your case.

How to fix Refused to display in a frame because it set 'X-Frame-Options' to 'sameorigin

Please use santizer with safe pipe and then include the link as below

<iframe class="doc" src="https://docs.google.com/gview?url=https://subtreebucket.s3.amazonaws.com/docsFile_1559124133664_dummy.pdf&embedded=true"></iframe>

Make sure you are using embedded=true while adding source in the iframe. It'll definitely work

Overcoming Display forbidden by X-Frame-Options

I had a similar issue, where I was trying to display content from our own site in an iframe (as a lightbox-style dialog with Colorbox), and where we had an server-wide "X-Frame-Options SAMEORIGIN" header on the source server preventing it from loading on our test server.

This doesn't seem to be documented anywhere, but if you can edit the pages you're trying to iframe (eg., they're your own pages), simply sending another X-Frame-Options header with any string at all disables the SAMEORIGIN or DENY commands.

eg. for PHP, putting

<?php
    header('X-Frame-Options: GOFORIT'); 
?>

at the top of your page will make browsers combine the two, which results in a header of

X-Frame-Options SAMEORIGIN, GOFORIT

...and allows you to load the page in an iframe. This seems to work when the initial SAMEORIGIN command was set at a server level, and you'd like to override it on a page-by-page case.

All the best!

---

Related Topics