AJAX and YouTube: 'X-Frame-Options' to 

Question

I'm writing a site where content is loaded dynamically via jQuery. The reason for this is to leave an audio player running while being able to navigate through page content without refresh.

Ran into trouble trying to get YouTube videos to work, it's setup like this.

Site content is loaded using .load(), and for the videos page it contains an unordered list of links to YouTube videos, and each with an empty <div> for <iframe>'s. Clicking on a link grows the <li> and embeds the <iframe> with the video.

Everything works well except the <iframe> will not load the source, throwing this error.

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

Also tried adding <iframe> into <li> with display: none; with same result.

I thought I understood the javascript same domain policy, but this is beyond me. Googling the error leads me to believe it's something server side? But that doesn't make any sense.

Hard to fiddle something like this, hope it makes sense.

Answer 1

You only need copy the from Youtube Embed section (click on SHARE below the video and then EMBED and copy the entire iframe). You can't add the youtube link directly from url

Answer 2

The error means that the document may only be used as iframe inside documents located at www.youtube.com

Use the URL of the embed-code instead:

http://www.youtube.com/embed/myvideo

it will send a X-Frame-Options-header with a value of ALLOWALL